CSS属性之pointer-events

[Roe-Tian]

首先看一下 MDN 上关于 pointer-events 的介绍：

CSS 属性 pointer-events 允许作者控制特定的图形元素在何时成为鼠标事件的 target。当未指定该属性时，SVG 内容表现如同 visiblePainted。

除了指定元素不成为鼠标事件的目标，none 值还指示鼠标事件穿过该元素，并指向位于元素下面的元素。

pointer-events 主要的用途还是穿透元素。直接看下面的示例。

示例

创建两个 div 元素，在每个 div 元素上面添加一个遮罩层，其中的文字被盖住了。正常情况如下，因为 div 上面有遮罩层，所以无法选中文字。

添加 pointer-events: none 之后，就可以穿透遮罩层顺利拷贝文字了。

总结

除了常用的 pointer-events: none 之外，还有很多其他参数。关于 pointer-events 详细介绍可以参考 MDN 上的内容。工作当中有很多应用场景，比如一些可以点击的商品图片，如果设计师在图片上设计了遮罩层，那使用 pointer-events 的属性无疑会很简单。