pointer-events属性的用法和兼容性（一文详解pointer-events）

在日常前端开发工作中，我们可能遇到这样的需求：

一些元素可以穿透，我们点击触摸它不会触发事件，甚至可以穿透点击它下面的元素。

比如模态框样式，防止按钮反复点击，蒙版可穿透等。

eg：

在这个tab选项卡中，即使最后一个元素被半透明蒙版遮住了，我们一般仍然允许它是可以被点击到的（因为此处是可拖动选项卡，无法写死点击蒙版来选择最后一个tab元素）。

这时候我们就会有一个需求，我们要求这个蒙版是可以穿透的，我们要通过穿透它来点击它下面的元素。

其实这是挺麻烦的。因为如果隐藏删除元素，那么它的蒙版效果也会跟着不见。

但是CS3中新出的一个属性完美的解决了一个问题。

pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标（移动端事件也可以）事件的 target。

除了指示该元素不是鼠标事件的目标之外，值 none 表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。

对于我们来说，我们只需要记住两个即可！

auto: 默认值，不允许穿透。

none: 可以穿透。

eg:

在这里，当 id 为 box 的元素覆盖住 id 为 pox 的元素时，我们只需要给 box加一行 pointer-events: none; ，点击 box 就可以穿透它直接触发 pox 身上的事件。

ps: 当DOM元素指定有id属性时，不需要通过document.getElementById()来获取定义它，它的id对应的值即为该dom元素对应的变量。

模态框应用

这个属性是我在看colorUI的模态框源码时候看到的，它主要是在模态框隐藏的时候给pointer-events的值改为none，使模态框不会因此而影响到页面中的其它元素。当模态框显示的时候再将pointer-events改为auto。

pointer-events兼容性：

Firefox 3.6+和chrome 2.0+ 以及safari 4.0+， IE11都支持这个CSS3属性。