在前幾天接到一個需求是要給后臺管理系統(tǒng)加上文字水印的功能，使用了一個water-mark-oc的第三方插件的實現(xiàn)，然后去看里面的源碼究竟是怎么實現(xiàn)這個水印功能的持搜，當時就很好奇為何在頁面z軸最上層增加了一個層卻完全不會影響下面元素的任何事件響應(yīng)惫东，簡直是前端黑科技，后來發(fā)現(xiàn)里面使用了一個的css屬性：pointer-events：none也糊，
看上去確實很神奇，以為會是事件冒泡代理轉(zhuǎn)發(fā)之類的很難懂的概念碘耳。實際上超級簡單显设，對某一個元素比如div采用div{pointer-events:none}即可讓這個HTML元素（包括它的所有子孫元素）失去所有的事件響應(yīng)。鼠標焦點會直接無視它辛辨，click捕捂、mouseover等所有事件會穿透它到達它的下一級元素.
pointer-events:none的作用是讓元素實體“虛化”瑟枫。例如一個應(yīng)用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替代實現(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);
});
}
實際運用：
https://www.zhangxinxu.com/study/201112/pointer-events-none.html
實現(xiàn)幻影功能
https://www.zhangxinxu.com/study/201112/pointer-events-a-button-disabled.html 實現(xiàn)a標簽按鈕完全禁用
總結(jié):如果你在一個頁面，有個最高的層級覆蓋其他層級隙弛，但是有不影響其他層級的事件的話架馋，那pointer-events:none這個屬性就非常適合你
原文參考:https://www.zhangxinxu.com/wordpress/2011/12/css3-pointer-events-none-javascript/
