359

我正在尝试在一个元素上捕获鼠标事件，该元素上还有另一个绝对定位的元素。

现在，绝对定位元素上的事件击中它并冒泡到它的父级，但我希望它对这些鼠标事件是“透明的”并将它们转发到它后面的任何东西。我应该如何实现这个？

4

6 回答 6

574 
pointer-events: none;

是一个 CSS 属性，它使事件“通过”应用该属性的 HTML 元素。它使事件发生在“下面”的元素上。

详见：https ://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

几乎所有浏览器都支持，包括IE11；21 年 5 月全球支持率约为 98.2%）：http : //caniuse.com/#feat=pointer-events（感谢@s4y 在评论中提供链接）。

于 2011-06-22T14:49:26.090 回答
51

如果您只需要鼠标按下，您可以通过以下方式使用该document.elementFromPoint方法：

  1. 在 mousedown 上删除顶层，
  2. x将事件中的和y坐标传递给方法document.elementFromPoint以获取下面的元素，然后
  3. 恢复顶层。
于 2009-06-18T06:08:23.163 回答
48

也很高兴知道...
可以为父元素（可能是透明的 div）禁用指针事件，但为子元素启用。如果您使用多个重叠的 div 层，这将很有帮助，您希望能够单击任何层的子元素。为此，所有育儿 div 获取pointer-events: none和点击子获取指针事件重新启用pointer-events: all 

.parent {
    pointer-events:none;        
}
.child {
    pointer-events:all;
}

<div class="some-container">
   <ul class="layer-0 parent">
     <li class="click-me child"></li>
     <li class="click-me child"></li>
   </ul>

   <ul class="layer-1 parent">
     <li class="click-me-also child"></li>
     <li class="click-me-also child"></li>
   </ul>
</div>
于 2014-11-07T11:08:03.390 回答
9

您没有收到事件的原因是因为绝对定位的元素不是您想要“单击”的元素的子元素（蓝色 div）。我能想到的最干净的方法是将绝对元素作为您想要单击的元素的子元素，但我假设您不能这样做，否则您不会在这里发布这个问题:)

另一种选择是为绝对元素注册一个单击事件处理程序并为蓝色 div 调用单击处理程序，使它们都闪烁。

由于事件通过 DOM 冒泡的方式，我不确定您是否有更简单的答案，但我很好奇是否有人有任何我不知道的技巧！

于 2009-06-17T22:20:42.627 回答
4

有一个可用的 javascript 版本可以手动将事件从一个 div 重定向到另一个。

我把它清理干净并做成了一个 jQuery 插件。

这是 Github 存储库： https ://github.com/BaronVonSmeaton/jquery.forwardevents

不幸的是，我使用它的目的 - 在谷歌地图上覆盖蒙版并没有捕获点击和拖动事件，并且鼠标光标没有改变，这会降低用户体验，我只是决定在 IE 和 Opera 下隐藏蒙版 -不支持指针事件的两个浏览器。

于 2013-03-27T16:51:45.913 回答
1

如果您知道需要鼠标事件的元素，并且您的叠加层是透明的，您可以将它们的 z-index 设置为高于叠加层的值。在这种情况下，所有事件当然应该在所有浏览器上都有效。

于 2012-02-25T18:02:33.050 回答