你不知道的pointer-events屬性

摘要： 在前幾天接到一個需求是要給後臺管理系統加上文字水印的功能，使用了一個water-mark-oc的第三方外掛的實現，然後去看裡面的原始碼究竟是怎麼實現這個水印功能的，當時就很好奇為何在頁面z軸最上層增加了一個層卻完全不會影響下面元素的任何事件響應，簡直是前端黑科技，後來發現裡面使用了一個的c...

在前幾天接到一個需求是要給後臺管理系統加上文字水印的功能，使用了一個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);
});
}

實際運用：

ofollow,noindex">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/