使用css3：pointer-events，允许点击穿透

背景

年前产品提了个需求，希望在页面元素最上层加上灯笼与下雪的动画，并且不影响下层元素的滑动与点击操作。于是，这个css3属性就登场了

属性介绍

pointer-events

MDN上的属性介绍：The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.

我的粗浅理解： 定义了这个属性的元素，触发的指针事件（手势或鼠标的触摸、点击）会根据属性去决定是否触发或下层元素触发（点击穿透）

属性值

普通元素只有两个属性值是需要的，其他都是只能用于SVG。

属性值	解释
auto	默认值，鼠标不会穿透当前层。
none	操作会忽略该元素，透传到元素的下层元素去触发操作事件

/* Keyword values */
pointer-events: auto;