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的。