获取鼠标点击坐标需根据参考系选择属性：clientX/Y相对于视口，pageX/Y相对于文档，offsetX/Y相对于目标元素；兼容旧浏览器应使用event.pageX || (clientX + scrollLeft)等回退方案。
获取鼠标点击事件在页面中的坐标，主要通过事件对象的几个坐标属性来实现，不同属性对应不同参考系，需根据实际需求选择。
clientX 和 clientY：相对于视口左上角的坐标
这两个属性返回鼠标点击位置距离浏览器可视区域（viewport）左上角的水平和垂直距离，不随页面滚动而变化。
- 适合做悬浮提示、拖拽元素时的相对定位
- 即使页面已滚动，clientX/Y 值仍以当前可见区域为基准
- 示例：event.clientX 返回 X 方向距离视口左边的距离
pageX 和 pageY：相对于整个文档左上角的坐标
这两个属性返回鼠标点击点在整个 HTML 文档（含滚动出视口的部分）左上角的绝对坐标，会随页面滚动自动调整。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 适合记录点击位置用于后续还原、截图标记或与 DOM 元素绝对位置比对
- 在有横向/纵向滚动条时，pageX/Y = clientX/Y + 滚动偏移量
- 注意：IE8 及更早版本不支持，需用兼容写法（见下文）
offsetX 和 offsetY：相对于目标元素左上角的坐标
这两个属性给出鼠标点击点在其触发事件的 DOM 元素内部的相对坐标（即“点在该元素的哪个位置被点击”）。
立即学习“Java免费学习笔记（深入）”；
- 常用于画布（canvas）绘图、自定义按钮热区判断、图像热点交互
- 值受元素 padding 影响，但不含 border 和 margin
- 注意：Firefox 中默认行为可能与 Chrome/Safari 略有差异，建议测试确认
兼容处理与实用建议
为兼顾旧浏览器（如 IE8-9）或确保逻辑健壮，可这样安全获取页面绝对坐标：
- 优先使用 event.pageX || (event.clientX + document.documentElement.scrollLeft)
- 同理，event.pageY || (event.clientY + document.documentElement.scrollTop)
- 监听时推荐用 addEventListener，避免内联事件中 this 指向混乱
- 移动端需注意：click 事件坐标可能延迟或不准，建议用 touchstart/touchend 并读取 touches[0].clientX
