事件穿透

拭目以待 发布于

一句话来解释事件穿透:

在一个元素进行事件触发操作,该元素会将该事件向上传递,而不是做为目标节点而接收该事件。

一个简单的使用:

下面有个a标签,这个标签链接地址为:http://www.lovejavascript.com

<a href="http://www.lovejavascript.com/" class="lovejavascript">lovejavascript</a>


加入下面的样式之后,这个标签则不会再触发默认事件而打开一个链接了。:

.lovejavascript{     
   pointer-events:none;
}

介绍一下pointer-events(引用自CSS参考手册):

取值:

auto:与pointer-events属性未指定时的表现效果相同。在svg内容上与visiblepainted值相同

none:元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。

其他值只能应用在SVG上。

说明:

设置或检索在何时成为属性事件的target。

使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标,那么指向该元素的任何事件在事件传播过程中都将通过父元素,并以适当的方式触发其上的事件侦听器。当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获(将会穿过父元素而指向位于其下面的元素)。

对应的脚本特性为pointerEvents。

兼容:

IE10以上,火狐3.5以上,其它都兼容



举个实用的例子:

HTML结构

<div class="user-photo">
    <img src="" width="100%" class="photo-show"/>
    <input type="file" class="photo-source"/>
    <span class="photo-eidt">点击修改头像</span>
</div>

问题描述:

区域1上绑定了一个click事件,区域2是用绝对定位至上传区域1的底部。区域2遮挡了区域1的部分区域,在区域2中执行点击事件时,并不会触发绑定于区域1的click事件。

解决方法:

在不想更改JS或DOM结构的情况下,在区域2的元素上增加样式pointer-events:none来阻止该元素成为事件目标,并将事件向中上传递至区域1的元素。