jQuery沿z轴发送mouseevents

是否可以沿z轴发送mousevent？
例如，一个元素已绝对定位在另一个元素上方的站点上。我希望下面的元素能够获得mouseover事件，即使另一个事件阻止了该事件，即使它们是完全不相关的(也没有父/子/兄弟关系)。

这可能发生在我正在构建的网站上的许多元素上，并且我希望采用一种通用的方法来解决此问题，而不必为每一个有可能发生这种情况的元素提供额外的JS功能。

最佳答案

第一种方法

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

$('#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。

关于jQuery沿z轴发送mouseevents，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7231113/