前言
在处理拖拽、自定义右键菜单、图形标注等功能时，获取精准的鼠标位置是核心需求。然而，JavaScript 事件对象中提供了四组看似相近的坐标属性，它们各自的参照物究竟是什么？本文带你一次性理清。
一、 四大坐标系深度对比
鼠标位置的获取完全取决于你选择的“参照物”。
| 属性对 | 参照物 (基准点) | 是否受滚动影响 | 典型场景 |
|---|---|---|---|
clientX / Y | 浏览器视口左上角 | ❌ 否 | 悬浮窗跟随、视口内交互 |
pageX / Y | 整个 HTML 文档左上角（只受整个页面滚动影响，不受元素内部滚动影响） | ✅ 是 | 绘图板坐标计算、长页面定位 |
offsetX / Y | 获取到是触发点相对被触发dom的左上角距离 | ❌ 否 | 元素内部点击位置判断 |
screenX / Y | 电脑显示器屏幕左上角 | ❌ 否 | 多屏交互、弹窗位置同步 |
div.addEventListener('mousedown', (e) => {
console.log(e.clientX, e.clientY);
console.log(e.pageX, e.pageY);
console.log(e.offsetX, e.offsetY);
console.log(e.screenX, e.screenY);
})
二、 核心属性细节拆解
1. clientX/Y vs pageX/Y
这是最容易混淆的一对。
clientX就像你眼睛看到的屏幕位置，无论页面怎么滚，它只管窗口内的坐标。pageX则考虑了页面的深度。- 换算公式：
2. offsetX/Y 的特殊性
offsetX 获取的是鼠标点击位置相对于目标元素内边界的距离。
💡 浏览器差异说明：
过去 IE 和 Chrome 对
offsetX的基准点（是否包含边框）存在定义差异。但在现代浏览器标准（W3C）中，offsetX/Y已经统一为：从 Padding Edge（内边距边界） 的左上角开始计算。
3. screenX/Y
它是相对于物理硬件的。除非你在做需要跨窗口通信或者多屏显示的复杂桌面级 Web 应用，否则在常规网页开发中较少使用。
三、 避坑指南：Offset 属性 vs Offset 事件
这是初学者最容易踩的坑：同名不同义。
dom.offsetLeft：是一个静态属性。它表示元素本身相对于其offsetParent的偏移。event.offsetX：是一个动态值。它表示鼠标点击的那一刻，距离该元素左边缘的距离。
div.addEventListener('mousedown', (e) => {
// 1. 鼠标点在 div 里的哪里？
console.log('点击位置:', e.offsetX, e.offsetY);
// 2. 这个 div 本身在页面的哪里？
console.log('元素位置:', div.offsetLeft, div.offsetTop);
});
四、 实战：判断点击是否在元素的某个特定区域
利用 offsetX/Y，我们可以轻松判断用户是否点击了某个元素的特定部分（如：点击了图片的右半部分）：
img.addEventListener('click', (e) => {
const width = img.clientWidth;
if (e.offsetX > width / 2) {
console.log('点击了右半边，下一张');
} else {
console.log('点击了左半边，上一张');
}
});
