javascript获取鼠标坐标需据场景选属性：clientx/y以视口为原点，pagex/y以文档为原点，offsetx/y以目标元素为原点；推荐用clientx/y兼容定位，pagex/y降级为clientx+scrollx，元素内坐标用getboundingclientrect()计算。
JavaScript 中获取鼠标点击坐标位置，主要通过事件对象的 clientX/clientY、pageX/pageY 和 offsetX/offsetY 等属性实现，不同属性对应不同参考系，选对才能准确定位。
clientX 与 clientY：相对于视口左上角
这是最常用的一组。无论页面是否滚动，它们始终以浏览器可视区域（viewport）左上角为原点：
- clientX 表示水平方向距离视口左侧的像素值
- clientY 表示垂直方向距离视口顶部的像素值
- 适合做悬浮提示、拖拽预览、菜单定位等需要贴合当前屏幕显示的场景
pageX 与 pageY：相对于整个文档左上角
这两个值会把页面滚动偏移量（scrollLeft/scrollTop）自动加进去：
- 即使页面已向下滚动 200px，点击文档底部元素时 pageY 仍反映它在整页中的真实纵向位置
- 适合记录点击位置用于后续还原、截图标记、热力图统计等需全局坐标的用途
- 注意：IE8 及更早版本不支持，但现代项目基本无需兼容
offsetX 与 offsetY：相对于目标元素左上角
点击发生在哪个元素上，就以该元素内容区左上角为原点计算：
- 如果给一个宽高 200×150 的
<div> 绑定点击事件，点在内部距左 30px、距上 70px 处，则 <strong>offsetX = 30</strong>，<strong>offsetY = 70</strong><li>常用于自定义画布交互、图片热点、按钮内图标响应区域判断</li> <li>注意：在某些浏览器中，若元素有 <code>border或padding，offset 坐标可能包含或不包含这些区域，行为略有差异；建议统一用getBoundingClientRect()配合clientX/Y手动计算更可靠 - 优先使用
event.clientX和event.clientY，兼容性好且语义明确 - 需要文档级坐标时，可用
event.pageX || (event.clientX + window.scrollX)做降级 - 想精确到某元素内部坐标，推荐：
const rect = target.getBoundingClientRect();const x = event.clientX - rect.left;const y = event.clientY - rect.top;
安全获取坐标的推荐写法
避免直接访问可能为 undefined 的属性，尤其在跨浏览器或处理 SVG 元素时：
