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

Question

是否有任何方法获取鼠标相对于其父元素的位置？

比方说，我有一个结构：

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

当我把我的鼠标span元素我需要的位置相对其到它的父元素（<div id="parent">）。 PageX/ClientX给了我相对于页面/客户区的位置，所以它不适合我。

Answer 1

从鼠标位置（pageX; pageY）减去父元素的位置（offsetLeft; offsetTop）以获得相对位置。如果您有多个等级的偏移量，请记住考虑offsetParent。

例如：

element.addEventListener("mousedown", function (e) { 
    let x = e.pageX - parent.offsetLeft; 
    let y = e.pageY - parent.offsetTop; 

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

哪里element是您的内部元件接收所述事件，并parent为坐标的期望的参考。

Answer 2

尝试offsetParent属性。 http://help.dottoro.com/ljetdvkl.php

试试这个： positionX = document.getElementByID（'childId'）。offsetParent.offsetLeft; positionY = document.getElementByID（'childId'）。offsetParent.offsetLeft;

Answer 3

jquery的偏移（）方法处理父定位，所以

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

是普通浏览器抽象jquery的。