JQuery的事件对象关于坐标的说明

jQuery的事件句柄函数有参数Event，它有关于当前触发元素的相关坐标，它们是

• pageX、pageY
• screenX、screenY
• clientX、clientY
• offsetX、offsetY

简单来说：

1. pageX、pageY表示离文档页面的坐标，如果发生滚动，则要把滚动距离也算上。
2. offsetX、offsetY表示相对于事件源元素（精准触发元素）的坐标。
3. screenX、screenY表示相对屏幕的坐标。
4. clientX、clientY表示相对可视窗口的坐标。

下面以Google Chrome为例来图示说明：

关于X

---

关于Y

---

不同浏览器对这些属性的支持

如果不用jQuery，则JavaScript本身也有事件对象，它们也有这些属性：

其中：

• offsetX，clientX，pageX，screenX在五大主流浏览器中实现的基本一致。
• 对于layerX，不同浏览器实现不同：

• 对于x，不同浏览器实现不同：

所以， 一般不使用 layerX， x。