clientXY，offsetXY，pageXY的区别

2019年9月8日 183次阅读 来源: 隐约雷鸣

简单说起来，就是：
offsetXY:是该事件发生的盒子模型里的坐标，与滚动条无关。
clientXY：是整个浏览器可用部分里的坐标，与滚动条无关。
pageXY：是整个网页里的坐标，与滚动条有关。

下面来个简单的例子说明一下。
页面里写了个div，背景颜色蓝色，长宽都是10px，fix在网页的右上角top20:px，right:10px的位置。网页里写了很多的br，使得垂直的滚动条可以滚动。

.fixed{
    position:fixed;
    width:10px;
    height:10px;
    background:blue;
    top:20px;
    right:10px;
}

大概效果是这样的：
《clientXY，offsetXY，pageXY的区别》

然后给这个小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是很夸张的数字，因为这是按照整个页面长度来计算的。

    原文作者：隐约雷鸣
    原文地址: https://segmentfault.com/a/1190000003074307
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞