Javascript:了解鼠标指针下的所有元素(多个 z 轴层)

Question

所以有一个非常酷的 fiddle ，它可以让你获取指针下的元素:

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 添加/删除指针事件更优雅:如 in this fiddle 所示及以下:

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/