JS Dom Event 中的clientX、screenX、pageX、offsetX、layerX

在前面的几篇文章中，我们讨论过offset、client和scroll。

JS offset系列简明教程
JS client系列简明教程
JS scroll系列简明教程

在这里面，我们讨论的，是DOM里面的element的属性，是window的方法。

这是，关于offset、client和scroll这几个东西，还有一部分是关于Dom里Event的属性的。

---

Dom Event中的坐标属性

• event.clientX/Y
• event.pageX/Y
• event.offsetX/Y
• event.layerX/Y
• event.screenX/Y
• event.x/y

==属性有这么多，但是clientX 和 screenX用得最多。==

区别

clientX/Y

clientX/Y获取到的是触发点相对浏览器可视区域左上角距离，不随页面滚动而改变。

兼容性：所有浏览器均支持

pageX/Y

pageX/Y获取到的是触发点相对文档区域左上角距离，会随着页面滚动而改变

兼容性：除IE6/7/8不支持外，其余浏览器均支持

offsetX/Y

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

兼容性：IE所有版本，chrome，Safari均完美支持，Firefox不支持

layerX/Y

layerX/Y获取到的是触发点相对被触发dom左上角的距离，数值与offsetX/Y相同，这个变量就是firefox用来替代offsetX/Y的，基准点为边框左上角，但是有个条件就是，被触发的dom需要设置为position:relative或者position:absolute，否则会返回相对html文档区域左上角的距离。

兼容性：IE6/7/8不支持，opera不支持，IE9/10和Chrome、Safari均支持

screenX/Y

screenX/Y获取到的是触发点相对显示器屏幕左上角的距离，不随页面滚动而改变。

兼容性：所有浏览器均支持

属性/浏览器	chrome	firefox	ie6/7/8	ie9	ie10+
offsetX	✔️	✘	✔️	✔️	✔️
clientX	✔️	✔️	✔️	✔️	✔️
pageX	✔️	✔️	✘	✔️	✔️
screenX	✔️	✔️	✔️	✔️	✔️
layerX	✔️	✔️	✘	✔️	✔️
x	✔️	✘	✔️	✔️	✔️

综上所述，clientX 和 screenX 是一路路灯，畅行无阻

测试代码

图解 event.offsetX，event.clientX，event.pageX，event.screenX属性

image.png

图解 event.layerX，event.layerY 属性

image.png

图解 event.x，event.y 属性

image.png

Jquery 兼容写法

Jquery event 事件对象，包含有 event.offsetX， event.clientX，event.pageX，event.screenX等属性（firefox 浏览器中， offsetX 为 undefined）。firefox 获取 offsetX / offsetY 的值，需要通过 event 对象的属性 originalEvent。

以上内容图解部分参考自图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别。感谢原作者的文章。

本文完。

---

参考：

JS基础篇--了解JS的clientX、pageX、screenX等方法来获取鼠标坐标详解

图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别