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') 而不是 $('*')），但这意味着您需要将该类添加到可能位于您想要处理鼠标事件的另一个元素下方的每个元素。我认为尺寸计算是造成大部分延迟的原因。由于页面上有许多潜在的“下方”元素，这可能会太慢。

这是一个工作示例。

Answer 2

我认为您不会找到一个相对简单的解决方案来完全满足您的需求，除非 Spycho 提到的指针事件技巧可以帮助您实现这一点。但是，您可以采取一些更不优雅的全局方法：

第三种方法

创建一个模仿元素，该元素与需要后退元素的鼠标事件位于相同的位置，但“隐藏”和更高的可见性除外z 索引。将其鼠标事件转移到被模仿的元素。

第四种方法

1. 检索相对于窗口的鼠标事件 迭代
2. 每个对象以确定您希望事件应用到哪个元素
3. 执行操作