在前幾天接到一個需求是要給后臺管理系統(tǒng)加上文字水印的功能，使用了一個water-mark-oc的第三方插件的實(shí)現(xiàn)，然后去看里面的源碼究竟是怎么實(shí)現(xiàn)這個水印功能的，當(dāng)時就很好奇為何在頁面z軸最上層增加了一個層卻完全不會影響下面元素的任何事件響應(yīng)，簡直是前端黑科技，后來發(fā)現(xiàn)里面使用了一個的css屬性：pointer-events：none，

看上去確實(shí)很神奇，以為會是事件冒泡代理轉(zhuǎn)發(fā)之類的很難懂的概念。實(shí)際上超級簡單，對某一個元素比如div采用div{pointer-events:none}即可讓這個HTML元素（包括它的所有子孫元素）失去所有的事件響應(yīng)。鼠標(biāo)焦點(diǎn)會直接無視它，click、mouseover等所有事件會穿透它到達(dá)它的下一級元素.

pointer-events:none的作用是讓元素實(shí)體“虛化”。例如一個應(yīng)用pointer-events:none的按鈕元素，則我們在頁面上看到的這個按鈕，只是一個虛幻的影子而已，您可以理解為海市蜃樓，幽靈的軀體。當(dāng)我們用手觸碰它的時候可以輕易地沒有任何感覺地從中穿過去。

pointer-events擴(kuò)展之瀏覽器支持的JS判斷

如果這個css3屬性瀏覽器不支持可以通過用js來擴(kuò)展

用來判斷瀏覽器是否支持其他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擴(kuò)展之幻影特性的JS替代實(shí)現(xiàn)
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);
    });
}

實(shí)際運(yùn)用：
https://www.zhangxinxu.com/study/201112/pointer-events-none.html
實(shí)現(xiàn)幻影功能
https://www.zhangxinxu.com/study/201112/pointer-events-a-button-disabled.html 實(shí)現(xiàn)a標(biāo)簽按鈕完全禁用

總結(jié):如果你在一個頁面，有個最高的層級覆蓋其他層級，但是有不影響其他層級的事件的話，那pointer-events:none這個屬性就非常適合你

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