css3 可穿透的盒子标签属性 pointer-events

来源:转载

2017阿里云双11红包领不停,充值返券5%,爆款限时惠!点击领幸运券

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

我们通过这个属性可以让一个dom元素显示,只能看又摸不到的那种感觉。就是鬼魂的那种感觉,点击事件则会触发其后面的dom。


使用

直接给dom元素写css样式即可


p{pointer-events:none;}

通常会设置的有两种值
- auto:与pointer-events属性未指定时的表现效果相同。
- none:元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。




分享给朋友:
您可能感兴趣的文章:
随机阅读: