pointer-events的作用

pointer-events:auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all

默认值:auto,

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

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

实际应用中,当红色盒子绝对定位在绿色盒子之上时,给绿色盒子添加点击事件,点击红色盒子区域正常情况下肯定不会触发点击事件。

但是当我们给红色盒子添加样式属性pointer-events:none;意思是红色盒子将不在是鼠标事件的target,也就是说鼠标事件将不会作用在该元素之上,现在点击红色盒子就会触发点击事件了。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值