Нахождение элемента 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");
});