通过绝对定位的元素传递鼠标事件
我试图捕获一个元素上的另一个绝对定位元素上的鼠标事件。
现在,绝对定位元素上的事件触发了它,然后向它的父类发起泡泡,但是我希望它对这些鼠标事件是“透明的”,并将它们转发到它后面的任何东西上。 我应该如何执行这个?
pointer-events:none;
是一个css属性,它使事件“通过”它所应用的DOM元素,并使事件发生在“below”元素上。
详情请参阅: https : //developer.mozilla.org/en/css/pointer-events
它不支持IE 11; 所有其他供应商支持它相当长的一段时间(全球支持在12/16年〜92%): http ://caniuse.com/#feat=pointer-events(感谢@Sidnicious在评论中提供链接)
如果所有你需要的是mousedown,你可以通过以下方法来处理document.elementFromPoint
方法:
- 去除mousedown上的顶层,
- 将事件的
x
和y
坐标传递给document.elementFromPoint
方法以获取下面的元素,然后 - 恢复顶层。
也很高兴知道…
可以禁用父元素的指针事件(可能是透明的div),但是可以为子元素启用。 如果您使用多个重叠的div图层,并希望能够单击任何图层的子元素,这将非常有用。 对于这个所有的父母的divs得到pointer-events: none
和click-children得到指针事件可以通过pointer-events: all
事件重新启用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>
你没有收到事件的原因是绝对定位的元素不是你想要“点击”(蓝色格)的元素的孩子。 我能想到的最简洁的方法是把绝对元素作为你想要点击的孩子的一个孩子,但我假设你不能这样做,否则你不会在这里发布这个问题:)
另一个select是为绝对元素注册点击事件处理程序,并调用蓝色div的点击处理程序,使它们都闪烁。
由于事件通过DOM泡沫的方式,我不确定有一个更简单的答案,但我很好奇,如果任何人有任何我不知道的技巧!
有一个JavaScript版本可以手动将事件从一个divredirect到另一个div。
我清理它,并将其制作成一个jQuery插件。
这里是Github仓库: https : //github.com/BaronVonSmeaton/jquery.forwardevents
不幸的是,我使用它的目的 – 在Google地图上覆盖一个遮罩,并没有捕获点击和拖动事件,鼠标光标也没有改变,这足以降低用户体验,所以我决定隐藏IE和Opera下的遮罩 – 两个不支持指针事件的浏览器。
如果您知道需要鼠标事件的元素,并且您的叠加层是透明的,则可以将它们的z-index设置为高于叠加层的东西。 在所有浏览器上,所有的事件当然都适用。