我试图在一个元素上捕获鼠标事件，并在它上面有另一个绝对定位的元素。
现在，绝对定位元素上的事件击中它并冒泡到其父级，但我希望它对这些鼠标事件“透明”并将它们转发到它后面的任何事件。我应该如何实施？
通过绝对定位元素传递鼠标事件
IT技术
javascript
html
dom
events
dom-events
2021-02-10 17:23:01
6个回答
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 在评论中提供链接）。
如果您只需要鼠标按下，您可以通过以下document.elementFromPoint方式使用该方法：
- 删除mousedown上的顶层，
- 将事件中的
x和y坐标传递给document.elementFromPoint方法以获取下面的元素，然后 - 恢复顶层。
也很高兴知道......
可以为父元素（可能是透明 div）禁用指针事件，但可以为子元素启用。如果您使用多个重叠的 div 层，您希望能够在其中单击任何层的子元素，这将很有帮助。为此，所有育儿 divpointer-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>
您没有收到事件的原因是绝对定位的元素不是您要“单击”的元素（蓝色 div）的子元素。我能想到的最简洁的方法是将绝对元素作为您想要点击的元素的子元素，但我假设您不能这样做，否则您不会在这里发布这个问题:)
另一种选择是为绝对元素注册一个点击事件处理程序，并为蓝色 div 调用点击处理程序，使它们都闪烁。
由于事件通过 DOM 冒泡的方式，我不确定是否有更简单的答案，但我很好奇是否有人有任何我不知道的技巧！
有一个 javascript 版本可以手动将事件从一个 div 重定向到另一个。
我把它清理干净，做成了一个 jQuery 插件。
这是 Github 存储库：https : //github.com/BaronVonSmeaton/jquery.forwardevents
不幸的是，我使用它的目的 - 在谷歌地图上覆盖一个蒙版并没有捕获点击和拖动事件，并且鼠标光标不会改变这会降低用户体验，以至于我决定在 IE 和 Opera 下隐藏蒙版 -不支持指针事件的两个浏览器。