javascript - 如果在不同的子元素上移动，MouseEvent.offsetX/Y 将重置为 0

Question

采取以下fiddle .

它包含一个带有 3 个子 div 的父 div。单击监听器附加到父 div，并且应该在鼠标相对于父 div 的位置上发出警报:

const parent = document.getElementById('main');
parent.addEventListener('click', handleMouseClick);

function handleMouseClick(e) {
    alert(e.offsetX, e.offsetY);
}

我的期望:单击任何子 div 并获取相对于父 div (#main) 的单击位置。

实际发生的情况:OffsetX/Y 始终等于相对于我点击的 child 的点击位置。

为什么会这样？我该如何解决？考虑到潜在的滚动，是否有另一种方法来获取鼠标相对于父 div 的位置？

Answer 1

你可以像这样得到你想要的:

function handleMouseClick(e) {
  child = e.target.getBoundingClientRect();
    alert(e.offsetX+child.left, e.offsetY+child.top);
}

该事件是为 child 触发的，因为它在顶部。因此，您可以获取 child 的 getBoundingClientRect() 并且可以访问它的左侧和顶部字段以确定它相对于其父级的位置。我希望这会有所帮助!

编辑:如果 event.target 的父级未定位在 (0:0) 那么您还必须涉及父级的偏移量(可能还有父级的父级等)才能获得鼠标的位置点击。您可以通过调用 parentElement 字段 (e.target.parentElement) 来遍历 DOM 对象的父对象。

例如:

function handleMouseClick(e) {
  childBounds = e.target.getBoundingClientRect();
  parentBounds = e.target.parentElement.getBoundingClientRect();
   alert((e.offsetX+childBounds.left-parentBounds.left) + ", "+ (e.offsetY+childBounds.top-parentBounds.top));
}