采取以下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 的位置?
最佳答案
你可以像这样得到你想要的:
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));
}
关于javascript - 如果在不同的子元素上移动,MouseEvent.offsetX/Y 将重置为 0,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39568498/