一、业务场景：

如下图所示，一个滚动页面左上角有一个div盒子遮挡住，当鼠标在非遮挡位置时可以滚动内容也可以触发点击事件，但在黑色块遮挡区域滚动或者点击事件都是无效的。

二、解决办法：

只要在遮挡的黑块元素上添加一个CSS属性即可，此时黑块不影响下方滚动，也不影响下方点击事件。

pointer-events: none;

pointer-events:none 的作用是让当前元素实体变的“虚有其表”。

例如：有一个按钮设置了pointer-events:none，则我们在页面上能看到这个按钮，但却无法对按键做任何操作，当点击时会直接穿透。

三、pointer-events属性详解：

pointer-events 属性主要用于控制元素如何响应鼠标事件和指针事件，即当我们点击或者滚动时该元素会如何进行回应。这个属性有以下几个取值：

1. auto（默认） : 它会响应鼠标事件，并且允许事件传递到其下方的元素。

2. none : 元素不会响应鼠标事件，事件会变的透明直接穿透到下方的元素。

3. visiblePainted : 元素并不响应鼠标事件，却会响应绘制事件（但只适用于SVG元素）。

4. visibleFill : 元素不响应鼠标事件，却会响应填充内容的事件，并且只适用于SVG元素（触发条件：isibility属性值：visible，并且鼠标的指针在元素内部才能触发。

5. visibleStroke : 元素不响应鼠标事件，却会响应描边内容的事件。（触发条件：visibility属性值：visible，并且鼠标的指针在元素边界

6. stroke : 元素不响应鼠标事件，却会响应描边内容的事件（触发条件：只有鼠标指针在元素内部或边界时）。

小结：

说实话，就是CSS一个属性的事，但有些相对冷门的CSS属性估计很多人都不知道，看过一次脑子里有个概念下次需要用的时候自然就能想到了。