使用纯 CSS 控制事件捕获，使得被覆盖的元素能够响应点击事件

我们在编写页面的时候，有的元素会有遮罩层，这个遮罩会影响后面元素的点击事件，造成这部分区域不可用，我们可以通过纯 CSS 来改变这种行为。

pointer-events

要让遮罩元素不影响它下面元素的事件响应，我们可以给它设置 pointer-events 属性：

.overlay { pointer-events: none; }

pointer-events 有两个值：

• auto，默认值，会响应鼠标点击事件
• none，不响应鼠标事件，由下层元素响应。

这里要让遮罩元素不影响它后面元素的事件响应，就把 pointer-events 设置为 none 就可以了。

示例

我们来看一个具体的示例。假设我们这里展示一张图片，图片下半部分有一个遮罩层，显示图片描述：

图片使用了超链接 a 标签进行包裹，点击后能跳转到某个网站：

<div class="imageContainer">
  <a href="https://www.zxuqian.cn">
    <img src="./2021-12-20-19-52-11.png" alt="" />
  </a>
  <div class="overlay">这是一段描述文案</div>
</div>

在没有任何特殊配置的情况下，如果点击遮罩层，那么不会有任何反应，如果我们把遮罩层元素的 pointer-events 属性设置为 none：

.overlay {
  pointer-events: none;
}

我们再看一下运行效果，点击一下遮罩层，可以看到触发了超链接的跳转，这样遮罩层就不影响它下边元素的事件响应了。

兼容性

pointer-events 的兼容性可以参考这个表格：

小结

好了，这个就是 CSS pointer-events 的用法，把它设置为 none 后，就会阻止该元素的点击事件捕获，让下层的元素来响应事件。你学会了吗？如果有帮助请三连，想学更多有用的前端开发知识，请关注峰华前端工程师，感谢观看！