如何在Javascript中获取ClickEvent的内部偏移量

直接使用鼠标事件对象的offsetX和offsetY属性就能获取相对于触发元素的内部坐标，这两个属性完全匹配你需要的Offset X和Offset Y定义。

以下是基于mousedown和mousemove事件的实现示例：

// 获取目标元素
const targetElement = document.getElementById('your-target-element');

// 监听鼠标按下事件
targetElement.addEventListener('mousedown', (e) => {
  const offsetX = e.offsetX;
  const offsetY = e.offsetY;
  console.log(`鼠标按下时内部偏移量：X=${offsetX}, Y=${offsetY}`);
});

// 监听鼠标移动事件
targetElement.addEventListener('mousemove', (e) => {
  const offsetX = e.offsetX;
  const offsetY = e.offsetY;
  console.log(`鼠标移动时内部偏移量：X=${offsetX}, Y=${offsetY}`);
});

补充说明 #

• offsetX：鼠标位置相对于触发元素内容区域左边缘的水平距离（以元素内容区域左上角为坐标原点）
• offsetY：鼠标位置相对于触发元素内容区域上边缘的垂直距离（原点同上）
• 这两个属性是标准鼠标事件属性，主流浏览器均支持，无需额外计算元素的页面位置信息。

内容的提问来源于stack exchange，提问作者Jan