一:事件对象event的属性
1. e.client:相对于当前页面(窗口,不是这个元素)可视区域的左顶点
document.onmousemove = function(e){
var x = e.clientX;
var y = e.clientY;
console.log("横坐标:" + x + ",纵坐标:" + y;
}
2.e.screen:相对于计算机屏幕的左顶点
document.body.onclick = function(e){
var x = e.screenX;
var y = e.screenY;
console.log("距离屏幕左边的距离:" + x + ",距离屏幕上边的距离:" + y);
}
3.offset:事件触发时鼠标距离该元素左边(x)或上边(y)的距离(与定位无关)
document.getElementById("son").onclick = function(e){
console.log(e.offsetY);
}
二:scroll、client、page、offset解析
1.offset: 偏移量(包含边框)
// 即使元素没有设置样式,只用文字填充,也能获取到
offsetWidth:获取dom元素的宽度
offsetHight:获取dom元素的高度
// 注意:是到父盒子的padding为止
offsetLeft:到最近的带有定位的父盒子的padding左侧的距离。
offsetTop:到最近的带有定位的父盒子的padding上边的距离。
2.client: 可视;当前对象的可视区域宽高(不包含边框)(有兼容性)
clientWidth: 可视宽度(width + padding)
clientHight: 可视高度(height + padding)
兼容性写法:
var clientWidth = window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth|| 0;
备注:
clientTop和clientLeft没用,他们通常指的就是border的宽度
(如果有滚动条会包含滚动条的宽度)
3.scroll:卷曲;获取页面卷曲的距离(页面滚动的坐标)(有兼容性)
document.onmouseover = function(){
var x = document.body.scrollLeft;
var y = document.body.scrollTop;
console.log("左边卷曲的距离:" + x + ",上边卷曲的距离:" + y);
}
兼容性写法:
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
4.page:鼠标在当前页面的位置(页面有卷曲的话要加上卷曲)(有兼容性)
// pageX和pageY不支持IE浏览器
// 它的用法和e.clientX和e.clienY大致相同,
// 但是当页面卷曲时,page系列能够获取到页面的准确坐标,计算了滚动的距离
// client系列不会计算滚动的距离
// 所以当设置图片随着鼠标滚动时,不计兼容问题的话,page系列很简单
// clien系列需要 + 对应的scroll
client:
pic.style.left = e.clientX + scrollLeft +"px";
pic.style.top = e.clientY + scrollTop + "px";
page:
pic.style.left = pageX +"px";
pic.style.top = pageY + "px";
三:jQuery中的offset和position
1. offset()方法
offset({left: 100,top: 100}):设置元素相对于文档doucment的位置
offset(): 获取元素相对于文档doucment的位置,获取的是一个对象
offset().left;offset().top 获取距离文档左边或上边的距离
2. position()方法
只能获取位置,不能设置
获取相对于其最近的有定位的父元素