其它属性都只适用于SVGvisiblePainted | visibleFill|visibleStroke|visible paintedfill|stroke |all
3、实际代码使用中案例:
禁止点击
图层覆盖覆盖后,底层图层鼠标事件失效时(无法点击),可以通过这个属性来实现,使得点击穿透,来触发底层的鼠标事件。
4、案例
4.1、禁止点击案例
.stopClick {
pointer-events: none; //元素不再是鼠标事件的目标,禁止当前层的鼠标事件
}
第二个a标签不仅无法被点击,而且没有鼠标手形样式
4.2、点击穿透案例
.bottom {
background: yellow;
width: 100px;
height: 100px;
}
.top {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
z-index: 100;
display: flex;
justify-content: center;
align-items: center;
/*不再监听当前图层的鼠标事件,而去监听下一层中元素的鼠标事件*/
pointer-events: none;
}
.top b{
display:inline-block;
margin: 0 auto;
/*子元素修改pointer-events,允许触发鼠标事件*/
pointer-events:auto;
}
顶层
document.getElementById("topTxt").onclick = function(evt){
alert('顶层内b元素的事件!');
evt.stopPropagation(); //阻止了事件的向上传播,否则就会触发父容器的alert事件。
}
function topSay(){
alert('顶层事件')
}
分析如下原本底层被顶层覆盖,使得底层的百度跳转事件无法被触发。
但是这里顶层设置了pointer-events: none;,使得顶层的鼠标事件被禁止,浏览器转而去监听下一层的鼠标事件,这就使得百度跳转事件又可以生效了。
由于顶层内的子元素b继承了顶层的pointer-events: none;,使得b也无法触发鼠标事件,但是,b元素其自身又重新设置了pointer-events:auto;,使得b又可以触发鼠标事件了。
在b元素的点击事件上,如果不加evt.stopPropagation(),去阻止事件冒泡,通过点击b,也会触发父容器的点击事件
5、兼容性
IE 11+
Firefox 3.6+
Chrome 4.0+
Safari 6.0
Opera 15.0
iOS Safari 6.0
Android Browser 2.1+
Android Chrome 18.0+