前言
这个属性我上网了解了一下,是一个十分有用的属性,大家可以更加深入的去了解一下!!
基础了解
该属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。
可选值有:
这里只挑第一个和第二个讲,因为后面都是只适用于SVG(我不会。。)
auto
与pointer-events属性未指定时的表现效果相同,对于SVG内容,该值与visiblePainted效果相同
none
元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
visiblePainted
visibleFill
visibleStroke
visible
painted
fill
stroke
all
深入了解
这里我引用一个大家都在用的例子方便大家理解:
红色框区域是操作区域,然后在这个区域是无法操作地图层的。那么我们就可以给这个div设置 pointer-events:none,然后你就会发现下面的地图就可以拖动和点击了。
与此同时,操作区域本身却无法操作了,直接被无视掉了。不过不用担心,我们可以给里面的元素重新设置为 pointer-events:auto,当然,只给需要操作的元素区域设置。
当把值设置为none后,他有如下相关特性:
1.阻止用户的点击动作产生任何效果
2.阻止缺省鼠标指针的显示
3.阻止CSS里的hover和active状态的变化触发事件
4.阻止JavaScript点击动作触发的事件
这里我们举个实际例子:
<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events">链接</a>
a{
pointer-events: none;
}
点击链接 时,不会跳转!!!
当然这个属性更多的还是用于那种雪花飘落的特效或者屏大地图等等,等后面我学习到了再来进行补充!!