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

Question

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

假设我有一个结构：

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

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

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

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;