关于screenX、clientX、pageX, offsetX的相关介绍

概念

---

1. offsetX 和offsetY

• offsetX ：鼠标点击位置相对于触发事件对象的水平距离
• offsetY：鼠标点击位置相对于触发事件对象的垂直距离

---

2. clientX 和clientY

• clientX：返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的水平坐标。 客户区指的是当前窗口。（不会计算水平滚动的距离）
• clientY：返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。 客户区指的是当前窗口。（不会计算垂直滚动的距离）

---

3. pageX 和pageY

• pageX：返回鼠标指针的位置，相对于文档的上边缘。（会计算水平滚动的距离）

• pageY：返回鼠标指针的位置，相对于文档的上边缘。（会计算垂直滚动的距离）

---

4. screenX 和screenY

• screenX ：返回事件发生时鼠标指针相对于屏幕的水平坐标。

• screenY：返回事件发生时鼠标指针相对于屏幕的垂直坐标。

图解

---

如图所示，假设图中的黄色区域是鼠标点击的位置，红色区域是鼠标触发事件对象，则这几个属性可表示为：