这个属性特别奇妙，以前从没想过它还能拥有这般超能力，让人眼前一亮。
通常我的使用场景是：把这个属性用在外层元素上，这样可以屏蔽鼠标事件，防止在表单提交的时候用户重复点击提交。
然而，现在我遇到一个很令人头疼的场景：按钮被某个<div>元素遮挡住了，而且这个<div>元素和按钮没有任何的父子元素，它们不在同一个DOM事件流中，这就导致无法使用冒泡和捕获的思想来解决。我能想到的比较规矩的解决办法是：根据点击事件的位置，判断是否点中了“按钮”，然后手动调用按钮的点击事件处理函数。虽说这种方案很中规中矩，但感觉不够简洁。多谢我的同事，她帮我想到了一个方法：使用pointer-events。
一开始我无法理解pointer-events是怎么生效的，直到读到了一句话：
This CSS property, when set to "none" allows elements to not receive hover/click events, instead the event will occur on anything behind it.
恍然大悟。
设置了pointer-events:none的元素，其不会响应任何hover/click事件，而是由其后面的元素进行响应。当前元素和后面的元素，并没有父子关系啥的，就是层级上的先后关系。
下面给出一个demo的示例代码：
HTML
<button id="btn" onclick="alert('you click me!');">submit</button>
<div class="mask"></div>
CSS
.mask {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: rgba(0, 0, 0, 0.5);
pointer-events: none;
}
button {
margin: 40px;
width: 80px;
height: 30px;
line-height: 30px;
font-size: 18px;
text-align: center;
text-transform: uppercase;
box-shadow: 2px 2px 5px #888;
}
在上面这个例子中，因为<div class="mask">元素使用了pointer-events属性，所以按钮可以被点击到，弹出alert提示窗。如果去掉这句CSS属性，按钮则无法被点击到。线上demo可以戳这里：https://jsfiddle.net/gaoshu883/waer47kj/
参考资料：
https://www.hangge.com/blog/cache/detail_1859.html
https://caniuse.com/#search=pointer-events
