考虑以下标记
<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);
时,它返回父元素。有没有办法获得子元素?
答案 0 :(得分:0)
是否可能由不正确的标记引起?你有结束div标签,他们应该关闭一个标签。
答案 1 :(得分:0)
You could use document.elementsFromPoint
instead.
它返回一个数组。
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;
}