pointer-events

CSS属性 pointer-events 允许用户控制特定的图形元素在何时成为鼠标事件的 target。当未指定该属性时，SVG 内容表现如同 visiblePainted。
除了指定元素不成为鼠标事件的目标，none 值还指示鼠标事件穿过该元素，并指向位于元素下面的元素。

而目前pointer-events 主要的用途还是穿透元素。
如需要一个上层背景覆盖内容而增加页面的丰富性，但由于上层容器的层级比较高，导致无法触发下层的内容的事件，只是一件很不友好的行为，而使用了这个属性pointer-events:none，就可以达成穿透的效果。
如使用canvas制作下雪的效果覆盖整个屏幕当成背景效果，或操作迭代的容器，当选中下层元素，可使用这个属性，当选回后设置为pointer-events:auto即可。

兼容性:
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+

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class='bg'></div>
<div class='content'>
    <a href='wwww.baidu.com'>百度</a>
</div>

<style>
.bg{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.2);
    z-index:10000;
    pointer-events:none;
}
</style>