最可靠方法是用 clientX/clientY 减去 getBoundingClientRect() 获取的 left/top 值：x = e.clientX - rect.left，y = e.clientY - rect.top；offsetLeft/offsetTop 因受定位祖先和 transform 影响而不适用；getBoundingClientRect() 自动包含 transform 效果；如需相对于内容区，再减去 padding。
在 JavaScript 中获取鼠标相对于目标元素的坐标，主要用 clientX/clientY 结合元素自身的边界框（getBoundingClientRect()）来计算。关键不是“绝对位置”，而是“减去元素左上角在视口中的偏移”。
用 getBoundingClientRect() 计算相对坐标
这是最可靠、兼容性好、且不受滚动影响的方法：
- 调用
element.getBoundingClientRect()获取目标元素在视口中的位置（含left、top） - 用
event.clientX - rect.left得到 X 方向相对坐标 - 用
event.clientY - rect.top得到 Y 方向相对坐标
示例：
element.addEventListener('mousemove', (e) => {
const rect = element.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
console.log(`相对坐标: (${x}, ${y})`);
});注意 offsetLeft/offsetTop 不适合直接使用
offsetLeft 和 offsetTop 返回的是元素相对于其 最近的定位祖先 的偏移，不是相对于视口，且不包含滚动距离和 CSS transform 影响。直接用它们减会出错，尤其当父容器有 transform、scroll 或 position: relative 时。
立即学习“Java免费学习笔记（深入）”；
如果元素有 CSS transform，仍推荐 getBoundingClientRect()
现代浏览器中，getBoundingClientRect() 返回的矩形已自动包含 CSS transform 的影响（如 scale、rotate），所以无需额外处理。它天然适配缩放、旋转等视觉变换。
补充：获取相对于元素内容区（排除 padding）的坐标？
若需排除 padding（即以 content-box 左上角为原点），可在上面结果基础上再减去 parseFloat(getComputedStyle(element).paddingLeft) 和 paddingTop：
const style = getComputedStyle(element); const paddingLeft = parseFloat(style.paddingLeft) || 0; const paddingTop = parseFloat(style.paddingTop) || 0; const xInContent = x - paddingLeft; const yInContent = y - paddingTop;
