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

Question

有什么方法可以获取鼠标相对于父元素的位置吗？

假设我有一个结构:

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

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

Answer 1

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

例如:

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