1、是什么
pointer-events 直译为指针事件，该属性指定在什么情况下某个DOM可以成为鼠标事件的 target。
简而言之，就是允许/禁止DOM的鼠标事件(click事件、hover事件、mouse事件等鼠标事件)
2、具体属性分析
用法分析：pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all
-
auto-----默认值，与pointer-events属性未指定时的表现效果相同，对于SVG内容，该值与visiblePainted效果相同 -
none----- 元素不再是鼠标事件的目标，鼠标不再监听当前层，而去监听下一层中的元素(这里的层指的是图层)。但是如果当前层的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的。这就是穿透点击事件的关键所在！
-
其它属性都只适用于SVG
visiblePainted｜visibleFill｜visibleStroke｜visiblepaintedfill｜stroke｜all
3、实际代码使用中案例：
-
禁止点击
-
图层覆盖覆盖后，底层图层鼠标事件失效时(无法点击)，可以通过这个属性来实现，使得点击穿透，来触发底层的鼠标事件。
4、案例
4.1、禁止点击案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.stopClick {
pointer-events: none; //元素不再是鼠标事件的目标,禁止当前层的鼠标事件
}
</style>
</head>
<body>
<ul>
<li><a href="https://www.baidu.com/">百度</a> </li>
<li><a href="http://example.com" class="stopClick">一个不能点击的链接</a></li>
</ul>
</body>
</html>
第二个a标签不仅无法被点击，而且没有鼠标手形样式
4.2、点击穿透案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.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;
}
</style>
</head>
<body>
<!-- 下方div -->
<div class="bottom">
<a href="http://www.baidu.com">下一层--百度</a>
</div>
<!-- 上方div -->
<div class="top" onclick="topSay()">
<b id="topTxt">顶层</b>
</div>
<script>
document.getElementById("topTxt").onclick = function(evt){
alert('顶层内b元素的事件！');
evt.stopPropagation(); //阻止了事件的向上传播，否则就会触发父容器的alert事件。
}
function topSay(){
alert('顶层事件')
}
</script>
</body>
</html>
分析如下
原本底层被顶层覆盖，使得底层的百度跳转事件无法被触发。
但是这里顶层设置了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+