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

2020/10/03 21:21 · javascript ·  · 0评论

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

现在,绝对定位元素上的事件将其击中并冒泡至其父对象,但我希望它对这些鼠标事件“透明”并将其转发到其背后的任何对象。我应该如何实施呢?

pointer-events: none;

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

详情请参阅:https : //developer.mozilla.org/en/css/pointer-events

IE 11之前不支持该功能。一段时间以来,所有其他供应商都支持它(全球支持在16年12月达到约92%):http : //caniuse.com/#feat=pointer-events(感谢@ s4y在评论中提供了链接) 。

如果您只需要按下鼠标,则可以通过以下document.elementFromPoint方法来实现该方法:

  1. 移除mousedown的顶层,
  2. 事件xy坐标传递document.elementFromPoint方法,以获取其下方的元素,然后
  3. 恢复顶层。

也很高兴知道...

可以为父元素(可能是透明的div)禁用指针事件,但为子元素启用指针事件。
如果您要处理多个重叠的div层,则可以在其中单击任何层的子元素,这将很有帮助。为此,所有育儿div获取
pointer-events: none和点击孩子获取的指针事件均由重新启用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手动重定向到另一个div。

我将其清理干净并制作为jQuery插件。

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

不幸的是,我使用它的目的-在Google Maps上遮罩没有捕获单击和拖动事件,并且鼠标光标没有改变,这使用户体验降级到足以使我决定将其隐藏在IE和Opera下-这两个不支持指针事件的浏览器。

如果知道需要鼠标事件的元素,并且叠加层是透明的,则只需将其z-index设置为高于叠加层的值即可。在这种情况下,所有事件当然都应该在所有浏览器上都起作用。

本文地址:http://javascript.askforanswer.com/tongguojueduidingweideyuansuchuandishubiaoshijian.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!