pagex/pagey获取含滚动的文档绝对坐标，clientx/clienty获取视口内固定位置坐标，offsetx/offsety获取元素内偏移量（受transform影响），委托场景需用getboundingclientrect手动计算目标元素内坐标。
在 JavaScript 中，mousemove 事件能实时响应鼠标移动，获取坐标的关键是读取事件对象的几个属性：区分「页面坐标」「视口坐标」和「元素内坐标」，偏移量则主要靠 offsetX/offsetY 或手动计算。
获取鼠标在页面中的绝对位置（含滚动）
使用 event.pageX 和 event.pageY，它们返回相对于整个文档左上角的坐标，已自动加上页面滚动距离，兼容性好（IE9+），无需额外计算。
-
pageX：鼠标距文档最左侧的总像素距离（含横向滚动） -
pageY：鼠标距文档最顶部的总像素距离（含纵向滚动）
获取鼠标在浏览器视口中的相对位置
用 event.clientX 和 event.clientY，它们以当前可视区域（viewport）左上角为原点，不随页面滚动变化，适合做悬浮提示、拖拽预览等需要“固定在屏幕某处”的场景。
- 即使页面向下滚动 200px，
clientY === 50仍表示鼠标在窗口顶部往下 50px 处 - 注意：它不包含滚动条宽度影响，但一般可忽略
获取鼠标相对于目标元素左上角的位置（常用偏移量）
最直接的方式是使用 event.offsetX 和 event.offsetY —— 它们返回鼠标点到触发事件的元素（event.target）左上角内边框的距离，单位像素，天然就是“元素内偏移量”。
- 支持良好（Chrome/Firefox/Safari/Edge 均支持，IE9+）
- 会受
transform影响（如缩放、旋转后坐标会按变换后空间计算） - 若需绕过
transform或兼容极老环境，可用getBoundingClientRect()手动算：
let x = event.clientX - rect.left;
let y = event.clientY - rect.top;
注意事件委托与目标元素的差异
如果监听的是父容器（如 document 或外层 div），但想获取鼠标在某个子元素内的偏移，不能直接用 event.offsetX/Y，因为它的参考系是 event.target（实际触发事件的元素）。此时应：
- 显式指定参考元素：
event.target === container ? ... : event.target.parentElement - 或用
event.composedPath()[0]获取原始目标（Shadow DOM 场景下更可靠） - 再结合
getBoundingClientRect()计算该元素内的坐标
