pointer-events介绍

一、pointer-events属性是什么？

pointer-events 属性是一个指针属性，是用于控制在什么条件下特定的图形元素可以成为指针事件的目标。pointer-events 属性有很多值，但是对于浏览器来说，适用于 HTML 元素的只有三个值，其它的几个值都是针对 SVG 元素的（本身这个属性就来自于 SVG 技术，是一个 SVG 属性，目前在CSS规范中没有找到其定义）。

二、属性值介绍

pointer-events 属性值

auto | none | inherit => HTML
visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all => SVG

针对HTML元素

none：该元素永远不会成为鼠标事件的 target。但是，当其后代元素的 pointer-events 属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器 (鼠标的动作将不能被该元素及其子元素所捕获，但是能够被其父元素所捕获)。
auto：默认值，表示指针事件已启用；此时元素会响应指针事件，阻止这些事件在其下面的元素上触发。对于 SVG 内容，该值与 visiblePainted 效果相同。
inherit：将使用 pointer-events 元素的父级的值。

注意：使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永远不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标。

针对 svg 元素（ visibility、fill、stroke属性）

visiblePainted：该属性值等价于 auto ；当 svg 中的某个元素可见，并且当其 fill 不是 none 时，指针在fill区域，该事件能够被捕捉到，当其 stroke 不是 none 时，stroke 目标事件能够被捕捉到， visibility 为 hidden 事件不可捕获。
visibleFill：fill属性的值不会影响事件处理，fill 区域都能捕获事件目标；visibility 为 hidden事件不可捕获
visibleStroke：stroke属性的值不会影响事件处理，stroke区域都能捕获事件目标；visibility为hidden事件不可捕获。
visible：fill 和 stroke 属性的值均不会影响事件处理， visibility 为 hidden 事件不可捕获。
painted：当其 fill 不是 none 时，指针在fill区域，该事件能够被捕捉到，当其 stroke 不是 none 时，stroke 目标事件能够被捕捉到， visibility 对事件处理无影响。
fill：fill、visibility 属性的值均不会影响事件处理，fill 区域都能捕获事件目标。
stroke：stroke、visibility * 属性的值均不会影响事件处理，fill 区域都能捕获事件目标。
all：所有区域事件处理均可捕获。

在svg中，为了更好地区分 pointer-events 每个属性值对于fill、stroke、visibility不同属性的指针属性状态，这里用一张图清晰地区分各种情况：

三、场景介绍

1、屏蔽鼠标事件（hover、active、onclick、阻止缺省鼠标指针的显示）

效果图:

当 parent_box 不设置 pointer-events：none 时，点击 child_box DOM 元素，会依次冒泡弹出child_box、parent_box、grand_box，当对 parent_box 元素设置 pointer-events：none时，鼠标点击 parent_box 任何区域内都只会弹出 parent_box，是因为该属性值屏蔽了parent_box 以及其子元素的鼠标事件，无法监听，但当我没对 child_box 设置 pointer-events: auto 时，点击 child_box 又会依次冒泡，是因为 auto 使得该元素重新成为事件目标。

2、事件穿透