当你有重叠元素时从点获取元素？

Question

您可以使用它来查找给定点的文档元素

document.elementFromPoint(x, y);

如果在这一点上存在重叠元素,你会怎么做？(我知道这不是一个很好的做事方式 - 在截止日期之前尝试一个针对错误的hackish办法).

Answer 1

我认为你已经知道,document.elementFromPoint(x, y);只返回与该点重叠的最顶层元素.

如果你要做的是找到与给定点重叠的所有元素,甚至是其他元素后面的元素,那么我不知道任何可以为你做这件事的DOM函数.你可能要写自己的.

一个有点hackish版本将是调用elementFromPoint(x,y),记住DOM项目,然后隐藏该项目display: none,然后elementFromPoint(x,y)再次调用,直到你得到的是身体,然后恢复你隐藏的项目.

一个不太讨厌的版本是循环浏览页面中的所有对象,并将页面中的偏移/高度/宽度与您的点进行比较.

这是一种方法:

function getAllElementsFromPoint(x, y) {
    var elements = [];
    var display = [];
    var item = document.elementFromPoint(x, y);
    while (item && item !== document.body && item !== window && item !== document && item !== document.documentElement) {
        elements.push(item);
        display.push(item.style.display);
        item.style.display = "none";
        item = document.elementFromPoint(x, y);
    }
    // restore display property
    for (var i = 0; i < elements.length; i++) {
        elements[i].style.display = display[i];
    }
    return elements;
}

工作演示:http://jsfiddle.net/jfriend00/N9pu9/

Answer 2

如果要查找重叠在某个点上的所有DOM元素，则可以简单地使用document.elementsFromPoint（），该方法返回在该点找到的所有元素的数组（显然，相对于视口从上到下排序，即：如果有叠加层，它将首先显示在数组中）

Answer 3

不确定最初提出问题的原因是什么，但是如果您需要使用触摸或鼠标元素检测当前可拖动的元素，则可以pointer-events: none;在可拖动元素上进行设置。执行此操作时，document.elementFromPoint()将忽略当前可拖动的元素并返回其下方的元素。