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

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

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

145722 次浏览
小开

您没有收到事件的原因是因为绝对定位的元素不是您想要“单击”的元素(蓝色div)的子元素。我能想到的最干净的方法是把绝对元素作为一个你想点击的子元素，但我假设你不能这样做，否则你不会在这里张贴这个问题:)

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

由于事件在DOM中冒泡的方式，我不确定是否有更简单的答案，但我非常好奇是否还有其他人有我不知道的技巧!

小开

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

  1. 移除鼠标下的顶层，
  2. 将事件的x和y坐标传递给document.elementFromPoint方法以获取下面的元素，然后
  3. 恢复顶层。
小开
最佳答案 
pointer-events: none;

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

详细信息:https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

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

小开

如果你知道需要鼠标事件的元素，如果你的覆盖是透明的，你可以把它们的z指数设置为比覆盖更高的值。在这种情况下，所有事件当然都应该在所有浏览器上正常工作。

小开

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

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

这是Github存储库: https://github.com/BaronVonSmeaton/jquery.forwardevents < / p >

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

小开

也很高兴知道…
指针事件可以为父元素禁用(可能是透明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>

提交答案