如何实现让最上面的图层不影响下面图层的点击事件（可穿透图层的鼠标事件）

咱先来解决问题然后再了解是怎摸个原理在了解他的兼容性

一、解决方案：可以最上面图层的样式添加  pointer-events: none 

二、这个 pointer-events: none 具体是什么个东西呢？

pointer-events 直译为指针事件，该属性指定在什么情况下某个DOM可以成为鼠标事件的 target。

简而言之，就是允许/禁止DOM的鼠标事件(click事件、hover事件、mouse事件等鼠标事件)

他当然不止一个属性值还有其他的某些属性值。

/* Keyword values（属性值） */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill;    /* SVG only */
pointer-events: visibleStroke;  /* SVG only */
pointer-events: visible;        /* SVG only */
pointer-events: painted;        /* SVG only */
pointer-events: fill;           /* SVG only */
pointer-events: stroke;         /* SVG only */
pointer-events: all;            /* SVG only */

/* Global values（全局值）*/
pointer-events: inherit; （从其父元素继承此属性）
pointer-events: initial; （将此属性设置为其默认值）
pointer-events: unset;

三、看了是不是看不大懂只是属性值不一样 那咱就继续

pointer-events:visiblePainted

只适用于 SVG，元素只有在以下情况才会成为鼠标事件的目标：

• visibility 属性值为 visible，且鼠标指针在元素内部，且 fill 属性指定了 none 之外的值
• visibility 属性值为 visible，鼠标指针在元素边界上，且 stroke 属性指定了 none 之外的值

pointer-events: visibleFill

        只适用于 SVG，只有在元素 visibility 属性值为 visible，且鼠标指针在元素内部时，元素才会成为鼠标事件的目标，fill 属性的值不影响事件处理。

pointer-events: visibleStroke

        只适用于 SVG，只有在元素 visibility 属性值为 visible，且鼠标指针在元素边界时，元素才会成为鼠标事件的目标，stroke 属性的值不影响事件处理。

pointer-events:visible

只适用于 SVG，只有在元素 visibility 属性值为 visible，且鼠标指针在元素内部或边界时，元素才会成为鼠标事件的目标，fill 和 stroke 属性的值不影响事件处理。

pointer-events:painted

只适用于 SVG，元素只有在以下情况才会成为鼠标事件的目标：

• 鼠标指针在元素内部，且 fill 属性指定了 none 之外的值
• 鼠标指针在元素边界上，且 stroke 属性指定了 none 之外的值

visibility 属性的值不影响事件处理。

pointer-events:fill

只适用于 SVG，只有鼠标指针在元素内部时，元素才会成为鼠标事件的目标，fill 和 visibility 属性的值不影响事件处理。

pointer-events:stroke

只适用于 SVG，只有鼠标指针在元素边界上时，元素才会成为鼠标事件的目标，stroke 和 visibility 属性的值不影响事件处理。

pointer-events:all

只适用于 SVG，只有鼠标指针在元素内部或边界时，元素才会成为鼠标事件的目标，fill、stroke 和 visibility 属性的值不影响事件处理。

四、兼容性
 

• IE 　11+
• Firefox 　3.6＋
• Chrome　4.0+
• Safari　　6.0
• Opera　 15.0
• iOS Safari 6.0
• Android Browser　2.1+
• Android Chrome　18.0+