pointer-events属性助你点透蒙层

这个属性特别奇妙，以前从没想过它还能拥有这般超能力，让人眼前一亮。
通常我的使用场景是：把这个属性用在外层元素上，这样可以屏蔽鼠标事件，防止在表单提交的时候用户重复点击提交。
然而，现在我遇到一个很令人头疼的场景：按钮被某个

元素遮挡住了，而且这个

元素和按钮没有任何的父子元素，它们不在同一个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

submit

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;
}

在上面这个例子中，因为

元素使用了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