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

Question

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

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

Answer 1

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

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

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

Answer 2

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

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

Answer 3

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 在 cmets 中提供链接）。

Answer 4

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

Answer 5

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

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

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

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

Answer 6

也很高兴知道...
可以为父元素（可能是透明的 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>