重叠的兄弟元素之间的条件鼠标事件传递

Question

是否有标准的Javascript技术或库来管理不相关的重叠HTML元素之间的条件鼠标事件传递？

例如,我在一堆HTML元素前面有一个部分透明的WebGL画布(由Three.js管理)(由Thee.js CSS3渲染器管理,但这不应该是相关的).那些HTML元素已经注册了mouseover和mouseout事件.我希望3D对象漂浮在这些元素的前面以阻止鼠标事件.

我已经知道如何使用光线施法器来确定鼠标是否在3D对象上.我不知道的是当3D对象不在其间时,如何允许鼠标事件将画布"传递"到底层HTML元素.

我已经阅读了有关遍历DOM树的解决方案,直到找到鼠标下方的元素.但这似乎过于复杂和缓慢.如果可能的话,我想做的就是假装画布暂时不存在,以便事件可以自然地通过.

为了不重新发明轮子,如果已经有了这个库,那将会很棒.

Answer 1

由于您不想像David Thomas所建议的那样使用指针事件,因此鼠标将始终以具有最高z-index的元素为目标,或者具有相同的z-index,最后一个兄弟(当相对堆叠在顶部时)其他).

话虽如此,我能想到的唯一方法是:

1. 隐藏画布
2. 读取下面的元素
3. 立即展示画布

这是如此之快,不会产生明显的闪烁.

如果鼠标下方有元素,则触发该元素鼠标事件.

在这里演示

$("canvas").mousemove(function (event) {
    if (document.elementFromPoint) {
        var $canvas = $(this);

        // hide canvas visibility
        // don't do display:none as we want to maintain canvas layout
        $canvas.css('visibility', 'hidden');

        // get the element underneath, if any
        var $under = $(document.elementFromPoint(event.clientX, event.clientY));

        // show again the canvas
        $canvas.css('visibility', 'visible');
        if ($under.hasClass('underneath')) { 
           $under.triggerHandler('mouseover');
        } else {
            $("#result").text("mouse is over the canvas");
        }
    }
})