通過部分座標查找DOM元素

Question

在JavaScript + DOM中，如果鼠標事件發生在容器上但位於所有封閉元素下方，如何有效地找到直接位於光標上方的封閉元素（相同x，不同y） ？

顯然getElementFromPoint不幫我在這裏（即使可用），因爲我不會逐個像素。如果有很多元素，找到容器中所有元素的位置也可能相當緩慢。

Answer 1

如果使用這樣的嵌套HTML標記，則可以繞過使用X，Y座標並導航DOM的需要。

<ul id="theparent" class="aparent"> 
    <li id="thechild" class="achild">Something</li> 
    <li id="anotherchild" class="achild">Something</li> 
</ul> 
<ul id="anotherparent" class="aparent> 
    <div id="yetanotherchild" class="achild">Something else</li> 
</ul> 

您可以使用jQuery綁定到每個achild div的onclick事件，然後找到其直接父：

$(".achild").bind("click", function() { 
    $(this).parent().trigger("childclicked"); 
}); 

然後你就可以做出點什麼父：

$(".aparent").bind("childclicked", function() { 
    console.log("a child of mine was clicked"); 
});