移动端touch事件无视disabled属性 转

先上个 demo ，点击全屏查看，切换到移动模拟模式，并点击按钮，查看控制台。发现click没有事件没有触发，而touch事件依然触发。

算是倒序，虽然不是写小说，拍电影科科~

这个问题挺早就发现了，当时使用Angular + hammerjs，很疑惑为啥disabled的按钮还能触发tap事件，Google无果，无奈通过别的方式在touch事件触发时，判断当前是否处于disabled状态，是则不往下执行。后来，自己在bootstrap的UI框架下，做了个实验，按照平常的习惯，写了个button.btn.btn-default,再添加disabled属性，模拟项目环境，依然引入了Angular + hammerjs，绑定了hm-tap指令，意外的发现居然不会触发tap事件，陷入苦思冥想中。

接着，我把问题简化，移除Angular 和 hammerjs，只使用jquery绑定touch事件，发现依然不会触发touch事件，上个类似我当时使用的 实验代码。

通过与上面代码的对比，你应该不难发现，前后只差了 btn 和 btn-default 这两个class，于是就有了线索。那再去掉一个class试试？发现去掉btn-default后，还是不触发touch事件，再去掉btn就恢复到了上个demo的情况了。也就是说，bootstrap的btn这个class，做了某件事可以阻止disabled触发touch事件！

事情更加明朗了，那么我们来看看btn这个“神奇”的class都干了神马。使用chrome审查元素，找啊找，发现了这个：

对，就是这个神奇的pointer-events属性！回忆一下，很早前就看到过这个属性，不过当时并没有进入到移动端的开发领域，对它的作用并没有过多关注。我们来看一下mdn上怎么说的：

The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events. When this property is unspecified, the same characteristics of the visiblePainted value apply to SVG content. In addition to indicating that the element is not the target of mouse events, the value noneinstructs the mouse event to go “through” the element and target whatever is “underneath” that element instead. 一共有11个值，其中只有 auto 和 none 是普通web元素的，其他的都是 SVG only的，SVG相关的我们暂不讨论。

auto 是默认值。

设置pointer-events:none的元素，将不会成为事件目标。但是如果其子孙元素设置了pointer-events:auto，该子孙元素仍然可成为事件目标，并且如果该事件支持冒泡，其设置了pointer-events:none的祖先元素，也会由于冒泡触发相应的监听事件。我们来做个 实验。

嗯，终于搞明白这个属性了！

我们再来看一下它的浏览器兼容性：

又是IE拖后腿了囧，不过移动端表现良好~

总结

pointer-events这个CSS3属性，在移动端我们基本可以“放肆”的使用，在你需要禁用某个元素事件或某个区域事件的时候，可以考虑下这个属性，简单高效~