Question

我试图在一个元素上捕获鼠标事件，并在其上面放置另一个绝对定位的元素。

现在，绝对定位元素上的事件会触及它并向其父级冒泡，但我希望它对这些鼠标事件“透明”并将它们转发给它背后的任何内容。我该如何实现呢？

Answer 1

pointer-events: none;

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

详见：https://developer.mozilla.org/en/css/pointer-events

IE 11不支持它;所有其他供应商都支持它很长一段时间（全球支持在12年/ 16年约为92％）：http://caniuse.com/#feat=pointer-events（感谢@ s4y提供评论中的链接）。

Answer 2

如果你需要的只是mousedown，你可以使用document.elementFromPoint方法，通过：

删除mousedown上的顶层
将事件中的x和y坐标传递给document.elementFromPoint方法以获取下面的元素，然后
恢复顶层。

Answer 3

也很高兴知道...
可以为父元素（可能是透明div）禁用指针事件，并为子元素启用指针事件。如果您使用多个重叠的div图层，您希望能够单击任何图层的子元素，这将非常有用。为此，所有育儿div获得pointer-events: none并且click-children获得由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>

Answer 4

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

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

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

Answer 5

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

我清理了它并将其变成了一个jQuery插件。

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

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

Answer 6

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

通过绝对定位的元素传递鼠标事件

6 个答案: