pointer-events

CSS pointer-events 用于设置指定的元素在什么时候成为鼠标事件的目标。

pointer-events 属性是一个SVG属性，在CSS规范中并没有明确指出该属性。

如果是在HTML元素上使用 pointer-events 事件，可以指定该元素是否接收鼠标或移动触摸事件。 pointer-events 属性可以阻止鼠标点击事件，各种鼠标状态（如鼠标滑过，激活状态等），以及鼠标光标的状态。

对于HTML元素来说， pointer-events 属性的可用取值有 none 和 auto 两个。当为元素设置 pointer-events 属性的取值为 none 的时候，该元素不会成为鼠标事件的目标，鼠标事件会穿透这个元素，指向位于该元素下方的元素。例如一个超链接文本上方有一个遮罩层元素，如果为遮罩层元素设置了 pointer-events: none; ，那么我们就可以直接透过遮罩层点击到这个超链接。如果将遮罩层元素的 pointer-events 属性设置为 auto ，那么遮罩层将会挡住超链接，使我们无法点击它。

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

子元素的 pointer-events 属性会覆盖父元素的 pointer-events 属性。例如，如果子元素的 pointer-events 属性设置为 auto 的时候，即使父元素的 pointer-events 属性是 none ，该子元素也可以接收到鼠标事件。

pointer-events 属性可用来提高页面滚动时的帧频。例如在页面滚动时，鼠标悬停在某些元素上，会触发元素上的hover效果。如果页面中大面积的使用了效果，在鼠标滑过时还会触发阴影动画，此时页面滚动时会照成性能下降的问题。如果我们在页面滚动时，为 body 元素添加 pointer-events：none ，则会禁用包括hover在内的鼠标事件，使页面的滚动帧频达到60fps，从而提高页面的滚动性能。

pointer-events: visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | none | inherit

上面的取值可以应用在SVG元素上。对于HTML元素，可用的取值如下：

pointer-events: auto | none | inherit

参数：

/* 关键字 */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted;
pointer-events: visibleFill;
pointer-events: visibleStroke;
pointer-events: visible;
pointer-events: painted;
pointer-events: fill;
pointer-events: stroke;
pointer-events: all;

pointer-events: inherit;

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    /* 其它样式代码... */
    pointer-events: none;
}