event对象的offsetX, clientX, pageX, screenX

现在需要对event对象的几大与坐标有关的属性做一个总结，以便于认识

offsetX|offsetY
offsetX/Y获取到是触发点相对被触发dom的左上角距离(包括padding在内，不包括border)，不过左上角基准点在不同浏览器中有区别，以内容区左上角为基准点（不包括边框），如果触发点在边框border上会返回负值。

用途：待发现

clientX|clientY和pageX|pageY
1. clientX|clientY这对坐标相对于窗口，从窗口的顶部/左侧边缘计算得出，类似于css属性的position:fixed clientX|clientY的原点是一直可以看得到的，这是窗口坐标。
2. pageX|pageY这对坐标相对于文档根（文档左上角），即网页左上角，注意是网页，类似于css属性的position:absolute 。pageX|pageY的原点会随着文档被滑动而看不到，这是文档坐标。
当页面滚动到最开始时，此时窗口的左上角恰好是文档的左上角，它们的坐标彼此相等。但是，在文档移动之后，元素的窗口相对坐标会发生变化，因为元素在窗口中移动，而元素在文档中的相对坐标保持不变。在下图中，我们在文档中取一点，并演示了它滚动之前（左）和之后（右）的坐标：
当文档滚动了：
- pageY — 元素在文档中的相对坐标保持不变，从文档顶部（现在已滚动出去）开始计算
- clientY — 同一元素的窗口相对坐标确实发生了变化（箭头变短了），因为同一个点越来越靠近窗口顶部。
特点：pageY=clientY+纵向已滚动长度
注意：这个纵向已滚动距离一般是子div高度大于父div此时这里的纵向已滚动距离是父div的scrollTop，子div的scrollTop是0，因为子div没有滚动。
screenX|screenY获取到的是触发点相对显示器屏幕左上角的距离，不随页面滚动而改变。

而clientX|clientY永远都是【上图应用】下来的最左上的那一点。
元素坐标：getBoundingClientRect
到这里去看，一定要点进去看，很重要，很详细的介绍了getBoundingClientRect

方法 elem.getBoundingClientRect()返回最小矩形的窗口坐标，该矩形将 elem 作为内建 DOMRect 类的对象。

主要的 DOMRect 属性：

x/y — 矩形原点相对于窗口的 X/Y 坐标，
width/height — 矩形的 width/height（可以为负）。
此外，还有派生（derived）属性：
top/bottom — 顶部/底部矩形边缘的 Y 坐标，
left/right — 左/右矩形边缘的 X 坐标。

当上下滑动窗口时 top/bottom/y是会变化的。
注意：这里的坐标原点都是与clientY|clientX的坐标原点是一样的，故可以利用css的fixed属性设置某个元素固定在视窗口的某处，使用 CSS position 以及 left/top（或 right/bottom）。

文档坐标

文档相对坐标从文档的左上角开始计算，而不是窗口。

在 CSS 中，窗口坐标对应于 position:fixed，而文档坐标与顶部的 position:absolute 类似。

我们可以使用 position:absolute 和 top/left 来把某些内容放到文档中的某个位置，以便在页面滚动时，元素仍能保留在该位置。但是我们首先需要正确的坐标。

这里没有标准方法来获取元素的文档坐标。但是写起来很容易。

这两个坐标系统通过以下公式相连接：

pageY = clientY + 文档的垂直滚动出的部分的高度。
pageX = clientX + 文档的水平滚动出的部分的宽度。

总结

页面上的任何点都有坐标：

相对于窗口的坐标 — elem.getBoundingClientRect()。
相对于文档的坐标 —elem.getBoundingClientRect() 加上当前页面滚动。

窗口坐标非常适合和 position:fixed 一起使用，文档坐标非常适合和 position:absolute 一起使用。

这两个坐标系统各有利弊。有时我们需要其中一个或另一个，就像 CSS position 的 absolute 和 fixed 一样。

参考：坐标(一定要去看)

event对象的offsetX, clientX, pageX, screenX，你能分清吗

原文：github

event对象的offsetX, clientX, pageX, screenX相关推荐

html5 offsetx,event对象中offsetX,clientX,pageX,screenX的区别
1.offsetX offset意为偏移量,是事件对象距左上角为参考原点的距离.以元素盒子模型的内容区域的左上角为参考点.不包括border. 2.clientX 事件对象相对于浏览器窗口可视区域的X ...
Js event对象offsetX, clientX, pageX, screenX, layerX, x区别（图解）
简介因为实际开发中,很少用到event对象的这几个值,每当写的时候又记不清,然后就要浪费时间去查找准确的资料,很是不爽,所以就做个记录~话不多说,直接上图(ps:图是网上找的,如果侵权,可立马删除) ...
图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
通过 3 张图和 1 张表格,轻松区别 Javascript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性. 一.测试代码如下: & ...
一张图看懂offsetX, clientX, pageX, screenX的区别
1.具体含义见下图1 2.浏览器的兼任情况更多专业前端知识,请上 [猿2048]www.mk2048.com
区分event对象中的[clientX,offsetX,screenX,pageX]
前言在平时的开发中,非常讨厌的就是兼容性了,兼容性的问题总会让我们记忆混淆,所以这次来区分一下event对象中的常用获取鼠标位置. clientX clientY event.clientX eve ...
event对象的offsetX、clientX、pageX、screenX及 window.innerWidth、outerWidth使用详解
目录 offset client screen page window.innerWidht offset offsetX.offsetY为当前鼠标点击位置距离当前元素参考原点(左上角)的距离,而不同 ...
[js] 事件对象 e.target offsetX clientX pageX
鼠标相关事件 e.target 触发事件的标签对象 - e.target.innerText:点击标签的本文内容- e.target.tagName :点击标签的标签名称,标签名称是大写字符- e.t ...
clientX,pageX,screenX，offsetLeft，scrollTop
这个东西,以为理解了,今天彻底弄弄. clientX 观点:鼠标相对于WINDOWS的坐标. 这里这个WINDOWS是指我们能看见的浏览器大小.所以不可能超过显示器的大小,如 screen.width ...
js 事件回调函数的对象属性说明：clientX、screenX、offsetX、pageX
clientX 鼠标相对于浏览器左上角x轴的坐标: 不随滚动条滚动而改变: clientY 鼠标相对于浏览器左上角y轴的坐标: 不随滚动条滚动而改变: pageX 鼠标相对于浏览器左上角x轴的坐标: ...

event对象的offsetX, clientX, pageX, screenX

文档坐标

总结

event对象的offsetX, clientX, pageX, screenX相关推荐

最新文章

热门文章