JavaScript中获取鼠标精准坐标需按场景选择属性：clientX/Y用于视口固定定位，pageX/Y用于文档绝对定位，offsetX/Y用于元素内部定位，getBoundingClientRect配合client坐标最稳定。
在 JavaScript 中，获取鼠标点击的精准坐标位置主要依赖事件对象的几个关键属性，不同场景下需选择合适属性组合，才能准确定位。
clientX 和 clientY：视口内的相对坐标
这两个属性返回鼠标相对于浏览器视口左上角的坐标（单位：像素），不随页面滚动而变化。适合做悬浮提示、菜单定位等需要固定在可视区域的操作。
- 值始终以当前可见窗口为基准，滚动页面时数值不变
- 兼容性极好，所有现代浏览器均支持
- 示例：event.clientX 返回 120，表示距视口左边 120px；event.clientY 返回 85，表示距视口顶部 85px
pageX 和 pageY：文档整体的绝对坐标
它们表示鼠标相对于整个文档左上角的坐标，包含滚动偏移量。适合需要精确定位到页面某元素或记录点击位置的场景（如画布绘图、热力图统计）。
- 会随页面垂直/水平滚动自动累加 scrollLeft / scrollTop 值
- 在移动端 Safari 中曾有兼容问题，但现代环境已基本稳定
- 若需兼容旧版 IE，可用 event.clientX + document.documentElement.scrollLeft 模拟 pageX
offsetX 和 offsetY：相对于目标元素内部的坐标
这两个属性返回鼠标点击点在触发事件的 DOM 元素内部的坐标（左上角为原点）。常用于按钮内图标响应、自定义滑块拖拽等局部交互。
立即学习“Java免费学习笔记（深入）”；
- 只对 click、mousemove 等鼠标事件有效，且受元素 padding 影响（从 padding 边界起算）
- 注意：当点击子元素时，offsetX/Y 是相对于 event.target 而非父容器
- 若目标元素设置了 transform，部分浏览器可能未按变换后视觉位置计算，建议结合 getBoundingClientRect 手动校正
更可靠的方案：getBoundingClientRect 配合 client 坐标
对于复杂布局（含缩放、transform、iframe 或需要避开边框/滚动条），直接使用 event.target.getBoundingClientRect() 获取元素位置，再与 clientX/clientY 运算，可获得最稳定的局部坐标。
- 先调用 rect = target.getBoundingClientRect()
- 计算：x = event.clientX - rect.left，y = event.clientY - rect.top
- 该方法不受 CSS 缩放、旋转影响，且兼容性优于 offsetX/Y 的某些边界情况
