jQuery沿z轴发送mouseevents

Question

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

这可能发生在我正在构建的网站上的大量元素上,我想要一个解决问题的常用方法,而不必为每一个有可能发生这种情况的元素提供额外的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')而不是$('*')),但这意味着您需要将该类添加到可能位于另一个要处理鼠标事件的元素下面的每个元素.我认为维度计算会导致大部分延迟.由于页面上有许多潜在的"底层"元素,这可能太慢了.

这是一个有效的例子.