clientX 相对于视口左上角，不随滚动变化，适用于悬浮提示、菜单定位；pageX 相对于文档左上角，随滚动变化，适用于绘图、锚点记录；需注意 IE8 兼容性及 screenX 等坐标差异。

event.clientX 和 event.pageX 都能获取鼠标在页面中的水平位置，但它们的参考系不同，适用场景也不同。关键不是“哪个更好”，而是“什么时候该用哪个”。

clientX：相对于浏览器可视窗口左上角

它返回的是鼠标指针距离当前浏览器视口（viewport）左边缘的像素值，不随页面滚动而变化。比如你滚动页面后点击同一块区域，clientX 值基本不变。

• 适合做悬浮提示、拖拽预览、菜单定位等依赖视口位置的功能
• 注意：如果页面有缩放（zoom）、iframe 或高 DPR 屏幕，可能需要额外处理
• 示例：右侧固定工具栏的点击热区判断，用 clientX 更直观

pageX：相对于整个文档左上角

event.pageX 是鼠标在整张 HTML 文档中的水平坐标，会随页面滚动而变化。滚动 200px 后再点同一个元素，pageX 比之前大 200。

• 适合做画布绘图、滚动锚点记录、元素绝对定位计算
• 兼容性注意：IE8 及更早版本不支持 pageX/pageY，需手动计算：event.clientX + document.documentElement.scrollLeft
• 在有横向滚动的长表格中，pageX 能准确反映列位置

别混淆：screenX、layerX、offsetX 的区别

它们不是 clientX/pageX 的替代品，而是不同层级的坐标：

• screenX：相对于用户屏幕左上角（含任务栏），一般不用
• layerX：相对于最近的定位祖先（已废弃，不要依赖）
• offsetX：相对于触发事件元素的内边框左上角，用于精确点击热区（如按钮图标区域）

实际开发小建议

• 要贴着视口右下角显示弹窗？用 clientX / clientY
• 要在页面某段文字下方加注释线？用 pageX / pageY
• 监听 mousemove 做拖拽？优先用 pageX/pageY，避免滚动时坐标跳变
• 兼容老项目？封装一个 getMouseX(e) 工具函数，自动 fallback 到 scrollLeft 计算