event.clientX 与 pageX 获取鼠标坐标方法

`event.clientX` 和 `event.pageX` 虽都用于获取鼠标水平坐标，但本质区别在于参考系：`clientX` 以浏览器可视窗口为基准，不随滚动变化，适合悬浮提示、菜单定位等视口相关交互；`pageX` 以整个文档为基准，随滚动实时更新，更适合绘图、锚点记录和绝对定位计算——选对坐标系比追求“更优”更重要，同时需兼顾 IE8 兼容性及 screenX、offsetX 等易混淆坐标的适用场景，实际开发中建议封装兼容性工具函数，让交互既精准又稳健。

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 计算

好了，本文到此结束，带大家了解了《event.clientX 与 pageX 获取鼠标坐标方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！