如果在不同的子元素上移動，MouseEvent.offsetX/Y將重置爲0

Question

請參閱以下fiddle。

它包含一個帶有3個子div的父div。點擊後偵聽器附加到父DIV和應該拋出警報相對於父DIV鼠標位置：

const parent = document.getElementById('main'); 
parent.addEventListener('click', handleMouseClick); 

function handleMouseClick(e) { 
    alert(e.offsetX, e.offsetY); 
} 

我期待什麼：點擊任何孩子的div以及相對於點擊位置得到父div（#main）。

實際情況：偏移X/Y總是等於相對於我點擊的孩子的點擊位置。

爲什麼會發生這種情況？我該如何解決它？是否有另一種方式來獲得相對於父div的鼠標位置，並考慮到潛在的滾動？

Answer 1

你可以得到你想要的東西是這樣的：被觸發

function handleMouseClick(e) { 
    child = e.target.getBoundingClientRect(); 
    alert(e.offsetX+child.left, e.offsetY+child.top); 
} 

本次活動爲孩子，因爲它是在上面。所以你可以抓住孩子的getBoundingClientRect（），你可以訪問它的左邊和頂部的字段來確定它與父代的關係。我希望這有助於！

編輯：如果event.target的父母不在（0：0）處，那麼您還必須涉及父母（也可能是父母的父母等）的偏移，以便獲得鼠標點擊的位置。您可以通過調用parentElement字段（e.target.parentElement）遍歷DOM對象的父項。

例如：

function handleMouseClick(e) { 
    childBounds = e.target.getBoundingClientRect(); 
    parentBounds = e.target.parentElement.getBoundingClientRect(); 
    alert((e.offsetX+childBounds.left-parentBounds.left) + ", "+ (e.offsetY+childBounds.top-parentBounds.top)); 
}