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

Question

我试图在一个元素上捕获鼠标事件,并在其上面放置另一个绝对定位的元素.

现在,绝对定位元素上的事件击中它并冒泡到它的父级,但我希望它对这些鼠标事件"透明"并将它们转发给它背后的任何东西.我该如何实现呢？

Answer 1

pointer-events: none;

是一个CSS属性,它使事件"通过"应用它的元素,并使事件发生在"下面"的元素上.

有关详细信息,请参阅:https://developer.mozilla.org/en/css/pointer-events

IE 11不支持它; 所有其他供应商都支持它很长一段时间(全球支持在12年/ 16年约为92%):http://caniuse.com/#feat=pointer-events(感谢@ s4y在评论中提供链接) .

Answer 2

如果您需要的只是mousedown,您可以通过以下document.elementFromPoint方式使用该方法:

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

Answer 3

也很高兴知道...
可以为父元素(可能是透明div)禁用指针事件,并为子元素启用.如果您使用多个重叠的div图层,您希望能够单击任何图层的子元素,这将非常有用.为此,所有父母divs get 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>

Answer 4

您没有收到事件的原因是因为绝对定位的元素不是您想要"点击"(蓝色div)的元素的子元素.我能想到的最干净的方法是将绝对元素作为你想要点击的那个的孩子,但我假设你不能这样做,或者你不会在这里发布这个问题:)

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

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