pointer-event属性详解 元素穿透点击

一、pointer-event属性可以指定在什么情况下元素可以成为鼠标事件
二、取值：
1、pointer-event:auto;(默认值)，对于svg元素，该值与visiblePainted效果相同

2、pointer-event:none;元素不会成为鼠标事件的target

3、pointer-event:visiblePainted;只适用于SVG元素，元素只有在以下情况才会成为鼠标事件的目标：
① visibility属性值：visible，且鼠标指针在元素内部，且fill属性值非none
② visibility属性值：visible，鼠标指针在元素边界上，且stroke属性值非none

4、pointer-event:visibleFill;只适用于SVG元素，元素只有在以下情况才会成为鼠标事件的目标：
① visibility属性值：visible，且鼠标指针在元素内部

5、pointer-event:visibleStroke;只适用于SVG元素，元素只有在以下情况才会成为鼠标事件的目标：
① visibility属性值：visible，且鼠标指针在元素边界

6、pointer-event:visible;只适用于SVG元素，元素只有在以下情况才会成为鼠标事件的目标：
① visibility属性值：visible，且鼠标指针在元素内部或边界

7、pointer-event:fill;只适用于SVG元素，元素只有在以下情况才会成为鼠标事件的目标：
① 只有鼠标指针在元素内部时

8、pointer-event:stroke;只适用于SVG元素，元素只有在以下情况才会成为鼠标事件的目标：
① 只有鼠标指针在元素边界上时

9、pointer-event:stroke;只适用于SVG元素，元素只有在以下情况才会成为鼠标事件的目标：
① 只有鼠标指针在元素内部或边界时

三、注意：
父元素如果设置了pointer-event:none 并不意味着父元素上的事件侦听器永远不会被触发，当子元素上设置pointer-event值不是none,那么都可以通过事件传播机制来触发父元素上的事件。

四、pointer-event：none的运用场景：

1、 任何元素设置pointer-event：none的效果相当于input[type=text|button|radio|checkbox] 设置disabled 属性，可以实现事件的禁用，例如：

<a href="xxxxxx" style="pointer-events: none">click me</a>

这个链接，是点不了的，并且 hover 也没有效果,但是可以通过tab来选中该元素，并按下enter键来触发链接，当href属性去掉，就不能通过tab进行触发

2、 当要禁用select下拉框可以设置pointer-event:none；

3、 当很多元素需要定位在一个地图层上面，需用到绝对定位、相对定位的元素，这样的话，这些元素就会盖住下面的地图层，

以至于地图层无法操作。这时元素设置 pointer-events: none，然后地图就可以拖动和点击了。但是操作区域本身却无法操作

了，可以再给需要操作的元素区域设置为 pointer-events:auto

原链接 https://blog.csdn.net/qq_37600506/article/details/99487744