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

我试图捕获一个元素上有另一个绝对定位的元素上的鼠标事件。

现在，绝对定位元素上的事件将其击中并冒泡至其父对象，但我希望它对这些鼠标事件“透明”并将其转发到其背后的任何对象。我应该如何实施呢？

pointer-events: none;

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

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

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

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

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

也很高兴知道...
可以为父元素（可能是透明的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下-这两个不支持指针事件的浏览器。

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