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

Question

有没有办法让鼠标相对于它的父元素的位置？

假设我有一个结构：

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

当我将鼠标移到span元素上时，我需要获取它相对于其父元素（ <div id="parent"> ）的位置。 PageX/ClientX 给我相对于页面/客户区域的位置，所以它对我不起作用。

Answer 1

从事件的clientX和clientY中的鼠标位置减去您可以通过getBoundingClientRect()获得的父元素的视口相对位置以获得相对位置。

例如：

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是您想要的坐标参考。

Answer 2

jquery offset()方法处理父定位，所以

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

是普通浏览器抽象的jquery。

Answer 3

试试offsetParent属性。

尝试这个：

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