通过局部坐标查找DOM元素

Question

In JavaScript+DOM, if the mouse event happened on a container, but beneath all enclosed elements, how can I efficiently find the enclosed element that is directly above the cursor (same x , different y )?

Obviously getElementFromPoint does not help me here (even where available), because I am not going to go up pixel by pixel. Finding positions of all elements in container can also be rather slow if there are a lot of elements.

Answer 1

If you use nested HTML tags like this you could bypass the need to use X,Y coordinates and navigate the DOM instead.

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

You could use jquery to bind to each achild div's onclick event, and then find its immediate parent:

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

And then you can make something happen for the parent:

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