clientXY，offsetXY，pageXY的区别

rainyang 发布于2019-08-01 14:47 / 2655人阅读

摘要：简单说起来，就是是该事件发生的盒子模型里的坐标，与滚动条无关。页面里写了个，背景颜色蓝色，长宽都是，在网页的右上角，的位置。结果注意两次的和有点误差，这个误差在以内都是没问题的。而是很夸张的数字，因为这是按照整个页面长度来计算的。

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

云服务器 GPU云服务器 pageXY offsetXY clientXY 主机的区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49593.html

JS -- offsetXY、clientXY、pageXY、screenXY的区别

摘要：以选中元素的盒子模型的左上角为原点，与滚动条无关是该事件发生的盒子模型里的坐标。以用户屏幕左上角为原点是鼠标位置相对于用户屏幕左侧水平偏移量，而则是鼠标相对于屏幕顶部垂直方向的偏移量。 offsetXY 以选中元素的盒子模型的左上角为原点，与滚动条无关是该事件发生的盒子模型里的坐标。 clientXY 以浏览器可视区域的左上角为原点，与滚动条无关是整个浏览器可用部分里的坐标。 pa...

wmui 2019-08-23 10:32 评论0 收藏0
clientXY，offsetXY，pageXY的区别

摘要：简单说起来，就是是该事件发生的盒子模型里的坐标，与滚动条无关。页面里写了个，背景颜色蓝色，长宽都是，在网页的右上角，的位置。结果注意两次的和有点误差，这个误差在以内都是没问题的。而是很夸张的数字，因为这是按照整个页面长度来计算的。简单说起来，就是： offsetXY:是该事件发生的盒子模型里的坐标，与滚动条无关。 clientXY：是整个浏览器可用部分里的坐标，与滚动条无关。 pag...

terasum 2019-08-21 10:37 评论0 收藏0
D3 源代码解析（二）

摘要：第一节点位于第二节点内。例如，返回意味着在在内部，并且在之前。这个函数返回一个函数，返回的函数绑定了当前对象并执行。这是继上一篇D3源码解构文章后的对D3的研究笔记，笔者的能力有限，如有哪里理解错误，欢迎指正。对集合的操作关于d3.attr 一个可以处理很多情况的函数，当只传入一个参数时，如果是string，则返回该属性值，如果是对象，则遍历设置对象的键值对属性值，如果参数大于等...

tainzhi 2019-08-22 10:34 评论0 收藏0
「大集锦」WEB前端开发辨析类面试真题

摘要：学堂码匠面试里最常出现的问题句式大概就是说说和的区别谈谈和的不同了吧一波波的辨析题正在袭来，快快开启防御，杀出重围，来一场绝地反击僵尸，啊，不对，辨析三连发扫描了众多的面试题，发现额各个技术之间的辨析真的是如僵尸一般，一波一波的相信不少人 HTML5学堂-码匠：面试里最常出现的问题句式大概就是说说XXX和XXX的区别谈谈XXX和XXX的不同了吧~！一波波的辨析题正在袭来，快快开启防御，...

CoderStudy 2019-08-22 11:08 评论0 收藏0
「大集锦」WEB前端开发辨析类面试真题

摘要：学堂码匠面试里最常出现的问题句式大概就是说说和的区别谈谈和的不同了吧一波波的辨析题正在袭来，快快开启防御，杀出重围，来一场绝地反击僵尸，啊，不对，辨析三连发扫描了众多的面试题，发现额各个技术之间的辨析真的是如僵尸一般，一波一波的相信不少人 HTML5学堂-码匠：面试里最常出现的问题句式大概就是说说XXX和XXX的区别谈谈XXX和XXX的不同了吧~！一波波的辨析题正在袭来，快快开启防御，...

ralap 2019-08-01 17:38 评论0 收藏0