通过坐标获取子元素

Question

考虑以下标记：

考虑以下标记

<div id = "parent">
 <a id = "child1" href = "#">1</a>
 <a id = "child2" href = "#">2</a>
 <a id = "child3" href = "#">3</a>
 <a id = "child4" href = "#">4</a>
</div>

我需要通过位置（X和Y坐标）获取父元素中的子元素。当我使用var element = document.elementFromPoint(x, y);时，它返回父元素。有没有办法获取子元素？

- Olena Horal

---

请问您能否展示一下在HTML中如何使用X和Y值来为子元素提供参考，以便我们更容易理解问题？ - undefined

显示的HTML无效。 - undefined

使用固定的标记，它可以正常工作- http://jsfiddle.net/ha0gepbn/ - undefined

当然，标记错误了。谢谢。 - undefined

Answer 1

你可以使用document.elementsFromPoint代替。

它返回一个数组。 const elementsAtPoint = document.elementsFromPoint(x, y) const numberOfElementsAtPoint = elementsAtPoint.length 数组中最深层嵌套的元素在最前面，最外层的元素在最后。你可以通过其id找到父元素，并返回数组中它之前的元素。

类似于这样详细的逐步说明：

const elementsAtPoint = document.elementsFromPoint(x, y);

const elementIds = elementsAtPoint.map(element => element.id);

const parentIndex = elementIds.indexOf("parent");

const childIndex = parentIndex - 1;

const childElement = elementsAtPoint[childIndex];

我在控制台中进行了一些测试，我认为这应该可以工作。你还需要处理找不到元素的情况。

我可能会将其重写为以下函数：

function getChildAtPoint(parentId, x, y){
  const elementsAtPoint = document.elementsFromPoint(x, y);

  const elementIds = elementsAtPoint.map(element => element.id);

  const parentIndex = elementIds.indexOf(parentId);

  // If we can't find element with parentId, or it is the first 
  // in the array we found nothing.
  if( parentIndex < 1 ){ return; };

  const childIndex = parentIndex - 1;

  const childElement = elementsAtPoint[childIndex];

  return childElement;
}

- pederk