CSS3 pointer-events 屬性小結

是啥

業務中遇到一個需求就是點擊提交按鈕的時候，爲了防止用戶一直點擊按鈕，發送請求，當請求未返回結果以前對按鈕進行禁用。由於按鈕是用 <a> 標籤寫的，因此單純的 disabled 不可取。

就這樣遇到了 pointer-events 這個 CSS3 屬性。其做用是指定在什麼狀況下 (若是有) 某個特定的圖形元素能夠成爲鼠標事件的 target。

咋用

• auto —— 效果和沒有定義 pointer-events 屬性相同，鼠標不會穿透當前層。在 SVG 中，該值和 visiblePainted 的效果相同。
• none —— 元素再也不是鼠標事件的目標，鼠標再也不監聽當前層而去監聽下面的層中的元素。可是若是它的子元素設置了 pointer-events 爲其它值，好比auto，鼠標仍是會監聽這個子元素的。
• 其它屬性值爲SVG專用，這裏很少提。

兼容性

很遺憾，公司對瀏覽器兼容的最低標準是 IE10。白高興一場，下方參考處有一個優雅的 pointer_events_polyfill 方案供參考。

參考

MDN - pointer-events

前端觀察 - CSS3 pointer-events介紹

張鑫旭 - CSS3 pointer-events:none應用舉例及擴展

Github - pointer_events_polyfill.js