你不知道的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/