简单说起来,就是:
offsetXY:是该事件发生的盒子模型里的坐标,与滚动条无关。
clientXY:是整个浏览器可用部分里的坐标,与滚动条无关。
pageXY:是整个网页里的坐标,与滚动条有关。
下面来个简单的例子说明一下。
页面里写了个div,背景颜色蓝色,长宽都是10px,fix在网页的右上角top20:px,right:10px的位置。网页里写了很多的br,使得垂直的滚动条可以滚动。
.fixed{
position:fixed;
width:10px;
height:10px;
background:blue;
top:20px;
right:10px;
}
大概效果是这样的:
然后给这个小div绑个点击事件:
function fixedClick(e){
console.log("offsetY: " + e.offsetY);
console.log("clientY: " + e.clientY);
console.log("pageY: " + e.pageY);
}
做实验。首先滚动条在位置1,点击一下div,然后往下拖动滚动条到位置2,点击一下div。打开console。
结果:
offsetY: 1
clientY: 21
pageY: 1649
offsetY: 7
clientY: 27
pageY: 1974
注意两次的offsetY和clientY有点误差,这个误差在10px以内都是没问题的。
毫无疑问,offsetY是以这个div的盒子模型的左上角为原点的,两次点击都小于10.
clientY是以浏览器可视区域的左上角为原点的,所以它是大于20,因为我们的div是top 20px的。
而pageY是很夸张的数字,因为这是按照整个页面长度来计算的。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。