前端pointer-events属性

1.如图

2.用法

使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永远不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。当然，位于父元素但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获（鼠标活动将会穿过父元素而指向位于其下面的元素）。

pointer-events: none;

元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。

pointer-events: auto;

      与pointer-events属性未指定时的表现效果相同，对于 SVG 内容，该值与visiblePainted效果相同

其他属性

只在svg上生效

简单来说

pointer-events: auto; 

就是不设置改属性效果一致

pointer-events: none;

设置该属性的元素上的点击事件都不触发，而是会穿透该元素后在父元素对应的位置触发对应的事件

3.总结

如顶部图，粉色区域有点击事件不会触发，而是会穿透粉色区域，落在区域后的对应元素上。