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

如果知道需要鼠标事件的元素，并且叠加层是透明的，则只需将它们的z索引设置为比叠加层更高的值。在这种情况下，所有事件当然都应该在所有浏览器上都起作用。

也很高兴知道...
可以为父元素禁用指针事件（可能是透明的div），但可以为子元素启用指针事件。如果您要处理多个重叠的div层，则可以在其中单击任何层的子元素，这将很有帮助。为此，所有育儿div get pointer-events: none和click-children get指针事件均由重新启用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>

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

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

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

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

我将其清理干净并制作为jQuery插件。

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

不幸的是，我使用它的目的-在Google Maps上遮罩没有捕获单击和拖动事件，并且鼠标光标没有改变，这使用户体验降级到足以使我决定将遮罩隐藏在IE和Opera下-这两个不支持指针事件的浏览器。

pointer-events: none;

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

详情请参阅：https : //developer.mozilla.org/en/css/pointer-events

IE 11之前不支持该功能。一段时间以来，所有其他供应商都支持它（全球支持在16年12月达到约92％）：http : //caniuse.com/#feat=pointer-events（感谢@ s4y在评论中提供了链接） 。

如果您只需要按下鼠标，便可以通过以下document.elementFromPoint方法来实现该方法：

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