1

简单说起来,就是:
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是很夸张的数字,因为这是按照整个页面长度来计算的。


隐约雷鸣
631 声望4 粉丝

人声控,吉他控,喵星控。