获取鼠标点击坐标需根据参考系选择属性：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 元素内部的相对坐标（即“点在该元素的哪个位置被点击”）。

• 常用于画布（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

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南