Javascript：了解鼠标指针下的所有元素（多个 z 轴层）

Question

所以有一个非常酷的小提琴，它允许您获取指针下的元素：

http://jsfiddle.net/MPTTp/

$(window).click(function(e) {
    var x = e.clientX, y = e.clientY,
        elementMouseIsOver = document.elementFromPoint(x, y);

    alert(elementMouseIsOver);
})

我有多个 z 轴图层，我想知道我的指针下的所有元素。

有什么建议吗？

Answer 1

只需查看每个元素，直到到达 html 标记。 您可以隐藏/显示元素或为此使用 pointerEvents：

http://jsfiddle.net/Gwy2u/

$(window).click(function(e) {
    var x = e.clientX,
        y = e.clientY,
        stack = [],
        elementMouseIsOver = document.elementFromPoint(x, y);

    stack.push(elementMouseIsOver);

    while (elementMouseIsOver.tagName !== 'HTML'){

        elementMouseIsOver.style.pointerEvents = 'none';
        elementMouseIsOver = document.elementFromPoint(x, y);

        stack.push(elementMouseIsOver);
    }

    /* Now clean it up */
    var i  = 0,
        il = stack.length;

    for (; i < il; i += 1) {
        stack[i].style.pointerEvents = '';
    }

    console.log(stack);
});

连同这个css样式：

.pointerEventsNone {
    pointer-events: none;
}

---

更新：

使用 classList 添加/删除指针事件属性更优雅：如本小提琴及以下所示：

function elementsAtLocation (x,y){
    var stack= [], el;
    do {
        el = document.elementFromPoint(x, y);
        stack.push(el);
        el.classList.add('pointerEventsNone');
    }while(el.tagName !== 'HTML');

    // clean up
    for(var i  = 0; i < stack.length; i += 1)
        stack[i].classList.remove('pointerEventsNone');

    return stack;
}

旧浏览器：对旧浏览器使用 display:none，但这会触发重绘/回流： http : //jsfiddle.net/Gwy2u/2/

Answer 2

还有另一种选择

$(window).click(function(e) {
    var x = e.clientX,
        y = e.clientY,
        stack = [];

    var allElements = document.getElementsByTagName('*');
    var len = allElements.length;

    for (var i = 0; i < len; i++) {
         var elm = allElements[i];
         var rect = elm.getBoundingClientRect();

         if(y >= rect.top && y <= rect.bottom && x >= rect.left  &&  x <= rect.right){
            stack.push(elm);
                 }
    } 
    console.log(stack);
});

示例链接： http : //jsfiddle.net/Gwy2u/41/

Answer 3

也许你可以试试

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

https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/elementsFromPoint

根据描述，DocumentOrShadowRoot 接口的 elementsFromPoint() 方法返回指定坐标（相对于视口）的所有元素的数组。