你不知道的pointer-events属性

在前几天接到一个需求是要给后端管理系统加上文字水印的功能，使用了一个water-mark-oc的第三方插件的实现，而后去看里面的源码到底是怎样实现这个水印功能的，当时就很好奇为何在页面z轴最上层添加了一个层却完全不会影响下面元素的任何事件响应，简直是前台黑科技，后来发现里面使用了一个的css属性：pointer-events：none，

看上去的确很神奇，以为会是事件冒泡代理商转发之类的很难懂的概念。实际上超级简单，对某一个元素比方div采用div{pointer-events:none}就可让这个HTML元素（包括它的所有子孙元素）失去所有的事件响应。鼠标焦点会直接无视它，click、mouseover等所有事件会穿透它到达它的下一级元素.

pointer-events:none的作用是让元素实体“虚化”。例如一个应用pointer-events:none的按钮元素，则我们在页面上看到的这个按钮，只是一个虚幻的影子而已，您可以了解为海市蜃楼，幽灵的躯体。当我们用手触碰它的时候可以轻易地没有任何感觉地从中穿过去。

pointer-events扩展之浏览器支持的JS判断

假如这个css3属性浏览器不支持可以通过用js来扩展

用来判断浏览器能否支持其余CSS3属性var supportsPointerEvents = (function(){ var dummy = document.createElement('_'); if(!('pointerEvents' in dummy.style)) return false; dummy.style.pointerEvents = 'auto'; dummy.style.pointerEvents = 'x'; document.body.appendChild(dummy); var r = getComputedStyle(dummy).pointerEvents === 'auto'; document.body.removeChild(dummy); return r;})();

pointer-events扩展之幻影特性的JS替代实现function noPointerEvents (element) {    $(element).bind('click mouseover', function (evt) {        this.style.display = 'none';        var x = evt.pageX, y = evt.pageY,        under = document.elementFromPoint(x, y);        this.style.display = '';        evt.stopPropagation();        evt.preventDefault();        $(under).trigger(evt.type);    });}

实际运用：
https://www.zhangxinxu.com/study/201112/pointer-events-none.html
实现幻影功能
https://www.zhangxinxu.com/study/201112/pointer-events-a-button-disabled.html 实现a标签按钮完全禁用

总结:假如你在一个页面，有个最高的层级覆盖其余层级，但是有不影响其余层级的事件的话，那pointer-events:none这个属性就非常适合你

原文参考:https://www.zhangxinxu.com/wordpress/2011/12/css3-pointer-events-none-javascript/