jQuery 沿 z 轴发送鼠标事件

Question

是否可以沿 z 轴发送 mouseevent？ 例如，一个元素在网站上绝对位于另一个元素之上。我希望下面的元素能够获取鼠标悬停事件，即使另一个元素阻止它，即使它们完全不相关(没有父/子/兄弟关系发生)。

这可能发生在我正在构建的网站上的大量元素上，我希望有一种通用的方法来解决该问题，而不必为每个有可能发生这种情况的元素提供一些额外的 JS 功能.

Answer 1

第一种方法

监听顶部元素上的鼠标事件并触发下面的元素。

$('#thingOnTop').mouseenter(function(){
  $('#thingUnderneath').mouseenter();
});

此解决方案无法满足您对可能发生此问题的所有元素提供通用解决方案的要求。如果上面的东西与下面的东西的位置和尺寸不完全相同，那么它也不会完全准确。

第二种方法

使用pointer-events CSS 属性。这将允许鼠标事件遍历事物，但旧版浏览器不支持它:

.thingsOnTop{
    pointer-events: none;
}

另请注意，这将使顶部的事物永远不会成为鼠标事件的目标，而不是在第一个解决方案中，它会触发顶部事物和该事物的处理程序下面。

JoshNaro 的第四种方法(详细说明)

当我刚刚添加另一种方法时，乔希(Josh)抢先了我。正如他所说，您可以监听顶部元素上的事件，然后以编程方式找出该元素下方的其他元素以获得事件的 X 和 Y 坐标。

HTML:

<div class="thingThatCouldBeOnTop"></div>
<div class="thingThatCouldBeUnderneath"></div>

JS:

$('.thingThatCouldBeOnTop').mouseenter(function(e){
    $('.thingThatCouldBeUnderneath').filter(function(){
        $this = $(this);
        var offset = $this.offset();
        var height = $this.outerHeight();
        var width = $this.outerWidth();
        return offset.top < e.pageY
            && offset.left < e.pageX
            && (height + offset.top) > e.pageY
            && (width + offset.left) > e.pageX;
    }).mouseenter();
});

$('.thingThatCouldBeUnderneath').mouseenter(function(){
    alert('do something more useful');
});

请注意:这是非常低效的。将搜索到的元素集减少到具有给定类的元素会有所帮助(即执行 $('.thingThatCouldBeUnderneath') 而不是 $('*'))，但这意味着您需要将该类添加到可能位于您想要处理鼠标事件的另一个元素下方的每个元素。我认为尺寸计算是造成大部分延迟的原因。由于页面上有许多潜在的“下方”元素，这可能会太慢。

Here's a working example .