通过坐标获取子元素

Get child element by coordinates

本文关键字：元素 获取 坐标      更新时间：2023-09-26

请考虑以下标记

<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 和 d Y 坐标）让孩子进入父级内部。当我使用var element = document.elementFromPoint(x, y);时，它会返回父元素。有没有办法获取子元素？

你可以

改用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;
}
相关文章：