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

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

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

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

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

1. 删除 mousedown 上的顶层，
2. 将事件中的 and 坐标传递给方法以获取下面的元素，然后xydocument.elementFromPoint
3. 恢复顶层。

pointer-events: none;

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

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

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

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

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

我清理了它，把它变成了一个jQuery插件。

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

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

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