鼠标坐标的视口、页面与目标参照 | 星雨笔录

核心： clientX/Y 相对视口、pageX/Y 相对文档；元素局部坐标可减去 getBoundingClientRect()。

最小示例：

document.querySelector('#box').addEventListener('click', e => {
  const r = e.currentTarget.getBoundingClientRect();
  console.log(e.clientX - r.left, e.clientY - r.top);
});

学完能做： 区分相对视口、文档和元素的鼠标坐标。