Javascript：获取鼠标相对于父元素的位置

Question

有没有办法获取鼠标相对于其父元素的位置?

假设我有这样一个结构:

<div id="parent">
    <span class="dot"></span>
</div>

当我将鼠标悬停在 span 元素上时，我需要获取它相对于其父元素 (<div id="parent">) 的位置。PageX/ClientX 给出相对于页面/客户端区域的位置，所以对��没有用。

- Peterim

Answer 1

通过使用getBoundingClientRect()获取父元素相对于视口的位置，然后将其从事件中的clientX和clientY得到的鼠标位置上减去，即可获得相对位置。

例如：

element.addEventListener("mousedown", function (e) {
    let bounds = parent.getBoundingClientRect();
    let x = e.clientX - bounds.left;
    let y = e.clientY - bounds.top;

    console.log(x, y);
});

其中element是接收事件的内部元素，而parent是您所需的坐标参考。

- Matti Virkkunen

---

如果某个后代元素使用相对或绝对定位，则此方法无效。 - Robert

@Robert 似乎有人在没有实际阅读答案的情况下添加了代码，并添加了不正确的代码。我现在已经更新了更好的方法。 - Matti Virkkunen

你真是个牛人，谢谢！ - LoveriusB

这个！救命稻草！ - Sven Cazier

Answer 2

jQuery offset() 方法处理父元素的定位，因此

function onsomemouseevent(e) {
    var x = e.pageX - $(e.target).offset().left;
}

这是一个关于IT技术的问题，它涉及到jQuery和浏览器的抽象概念。

- citykid

---

当您处理具有子元素的元素时，可能还有用使用 e.currentTarget。 - malloc4k

Answer 3

这是一个与React相关的例子，但我认为即使在React之外，这些概念也可以使用。

onMouseMove={(e) => {
   var x = e.clientX - e.currentTarget.offsetLeft;
   var y = e.clientY - e.currentTarget.offsetTop;

   // Do something with x and y
}}

此外，我发现在进行大量计算时，限制鼠标移动捕获非常有用。这里有一个很好的StackOverflow答案，展示了如何实现这一点。

- Corey P

Answer 4

尝试使用 offsetParent 属性。

试试这个：

positionX = document.getElementById('childId').offsetParent.offsetLeft;
positionY = document.getElementById('childId').offsetParent.offsetLeft;

- Joshua Enfield