javascript获取鼠标坐标分三类：clientx/clienty以视口为原点，pagex/pagey以文档为原点并兼容滚动，元素内坐标需用getboundingclientrect()计算相对位置；offsetx/y和layerx/y已不推荐。
JavaScript 中获取鼠标坐标主要靠事件对象的几个属性，关键看你要的是“页面级坐标”还是“元素内相对坐标”，两者用途不同，别混用。
页面坐标：clientX / clientY（视口左上角为原点）
这两个属性返回鼠标相对于浏览器可视区域（不包括滚动条）左上角的横纵坐标，不管页面有没有滚动，值始终基于当前可见区域。
- 适用于做悬浮提示、拖拽预览、全屏交互等需要和视口对齐的场景
- 监听
mousemove、click、mousedown等事件时直接从事件对象取值：event.clientX - 注意：它不包含页面被卷走的部分（即 scrollTop / scrollLeft），如果需绝对页面位置，得手动加上
文档坐标：pageX / pageY（整个文档左上角为原点）
这两个属性返回鼠标相对于整个 HTML 文档左上角的坐标，自动考虑了页面垂直/水平滚动距离，更接近“真实页面位置”。
- 适合做定位保存、截图标记、与 DOM 元素绝对位置比对（比如判断是否拖入某区域）
- 在大多数现代浏览器中稳定支持；IE 不支持，但可用
clientX + window.pageXOffset兼容 - 例如：
const x = event.pageX || (event.clientX + window.pageXOffset)
元素内相对坐标：getBoundingClientRect() 配合计算
想得到鼠标在某个特定元素内部的坐标（比如画布绘图、自定义滑块、热区响应），不能只靠 event 坐标，得结合元素自身位置。
- 先用
element.getBoundingClientRect()获取元素相对于视口的边界信息（含 left、top、width、height） - 再用
event.clientX - rect.left得到 X 方向相对元素左边缘的距离，同理算 Y - 示例代码：
element.addEventListener('mousemove', e => {<br> const rect = element.getBoundingClientRect();<br> const x = e.clientX - rect.left;<br> const y = e.clientY - rect.top;<br> console.log(`元素内坐标：${x}, ${y}`);<br>});
注意 offset X/Y 和 layerX/Y（已不推荐）
offsetX/offsetY 看似方便，但它以触发事件的**目标元素内容区左上角**为原点，且受 CSS transform、border、padding 影响，行为不一致；layerX/layerY 在 Firefox 中曾存在，但已被废弃。建议统一用 getBoundingClientRect() 计算，可控性强、兼容性好。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
