通过部分坐标查找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"); 
});