jQuery沿z轴发送mouseevents

时间:2011-08-29 13:57:19

标签: jquery jquery-ui mouseevent z-index mouseover

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

这可能发生在我正在构建的网站上的大量元素上,我想要一个解决问题的常用方法,而不必为每一个有可能发生这种情况的元素提供额外的JS功能。

2 个答案:

答案 0 :(得分:6)

第一种方法

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

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

答案 1 :(得分:2)

我认为你不会找到一个完全满足你需求的相对简单的解决方案,除非Spycho提到的指针事件技巧可以让你在那里。然而,您可以采取一些更为不优雅的全球方法:

第三种方法

创建一个与想要返回元素的鼠标事件位于相同位置的模拟元素,但“hidden”和更高z-index的可见性除外。将鼠标事件转移到模仿元素。

第四种方法

  1. 检索相对于窗口的鼠标事件
  2. 遍历每个对象以确定要将事件应用于哪个元素
  3. 执行操作