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

Question

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

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

我已经知道如何使用光线转换器来确定鼠标是否在 3D 对象上。我不知道的是，当中间没有 3D 对象时，如何允许鼠标事件“通过” Canvas 到达底层 HTML 元素。

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

为了不重新发明轮子，如果已经有一个库就好了。

Answer 1

由于您不想像 David Thomas 建议的那样使用指针事件，因此鼠标将始终定位具有最高 z-index 的元素，或者具有相同 z-index 的最后一个兄弟元素(当相对堆叠时在其他之上)。

说到这里，我能想到的唯一方法是:

1. 隐藏 Canvas
2. 阅读下面的元素
3. 立即返回 Canvas

速度非常快，不会产生明显的闪烁。

如果鼠标下方有一个元素，则触发该元素的鼠标事件。

Demo here

$("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");
        }
    }
})