遮罩覆盖的DOM，如何触发点击 等一系列事件

引言

今天，调试 iview 这个UI组件库 modal 组件样式的时候，在可 拖拽 的样式上看到一个样式 pointer-event 。虽然自诩（吹牛）在样式上有较多的理解，但是我却不知道这个样式的具体作用（打脸了）。
审查元素后，发现这是我多年来心心念念的一个效果 ヾ(◍°∇°◍)ﾉﾞ ，曾经想过能否用 javascript 实现的效果（当时失败了，没找到如何实现）。现在用一个样式就能完美解决，看来当时查找问题的能力还是太差了。

那接下来就看看，我心心念念那么久的功能是什么。

解释 pointer-event

pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。

除了指示该元素不是鼠标事件的目标之外，值为 none 表示鼠标事件 穿透 该元素并且指定该元素 下面 的任何东西。

（这两句话复制于 这里，可以点进去看更多解释，当然想听我唠嗑，可以接着往下看）

举例说明上面解释的效果

上图展示了被两个粉色 遮罩 DOM 覆盖住的一个在 hover 时添加了效果的 DOM 框，并且里面有两个按钮，右侧的遮罩内有两个子 DOM。

左侧的粉色遮罩 ，样式是默认的，也就是 pointer-event 默认是 auto，它覆盖了 下面的方框，当移鼠标移到方框上方的 粉色 区域时，方框 hover 的效果没有显示，因为粉色遮罩盖住了方框。仔细看鼠标的样式以及方框的样式就明白了。

右侧的粉色遮罩，设置了 pointer-event: none; ，鼠标移动到覆盖住方框的粉色区域，鼠标样式与方框样式变化都触发了。仔细查看移动到 button 按钮上时也一样。

最右边两个 橙色 框，都是右侧粉色遮罩的 子元素，因为 pointer-event 属性会继承，所以移上去只有下面重置回 pointer-event: auto; 的橙色框的鼠标样式不一样。

上面的效果图演示例子

设置了 pointer-event: none; 的 DOM ,在控制台审查元素时默认也无法选中，需要在文档中找到这个DOM 选中，效果如下：
左侧的粉色遮罩能选中，右侧粉色框无法选中，右侧上方的橙色框无法选中，下方的橙色框可以选中。

有哪些场景可以使用到

1.如果你的网页上使用了img 标签，但是不想让用户拖动，想让它像背景图一样，就可以给这种图片加上 pointer-event: none; ，这样图片就会忽略鼠标的事件了，直接穿透 图片，使事件直接作用于图片下方的元素。

2.如果我们想使页面某一块儿拥有遮罩，但是我们这一块儿元素的事件却不能屏蔽掉。之前我们可能使用 opacity: .5 使元素半透明的方式曲线救国，如果要其他颜色遮罩，就是在这个半透明元素父级添加一个背景色。 现在知道了 pointer-event 这个样式，就不用这么麻烦，直接覆盖要遮挡的元素，设置好 pointer-event: none; 这样顶层这个遮挡只保留了样式，不会阻止鼠标触发遮罩下方 DOM 的事件。

3.曾今想通过父级代理的方式，代理子元素的事件。比如有一排按钮，只需要在这一排按钮的父级添加 click 事件， 再通过 事件默认传进来的 event 事件对象，取出 target，再通过判断 target 的属性，知道点击的是哪一个按钮。这样做有一个小小的bug，就是如果这个按钮上有图标，而恰好点在图标上，target 指向的就不是 按钮本身的DOM 了，而是图标。这里也只需要把 图标的DOM 设置 pointer-event: none; 这样图标的元素就不会成为 target 的指向了。

还有很多。。。。

总结

pointer-event 的样式看起来很简单，却能给我们带来很不错的效果。
这里也只分享了 none 这个值带来的效果，有兴趣的童鞋可以进这里面看看 css pointer-event，以及 SVG pointer-event

在样式的世界里，每种样式互相搭配，有时候你就会发现你以前没发现的新天地。