`pointer-events: none;`的效果

整理自gitHub筆記：CSS3：pointer-events: none;的效果

1、背景

項目中要實現長按圖片觸發分享彈窗的功能，測試的時候發現長按圖片會觸發系統的彈窗（保存圖片，分享圖片等）。如何禁止系統的行爲呢？
bing了一下發現pointer-events: none;能夠解決問題。

2、細說pointer-events: none;

2.1 語法

pointer-events: none;表示元素不會對mouse/touch相關事件做出響應。

2.2 pointer-events: none;的效果

1. 不會觸發鼠標相關的事件，以及相關的hover效果

• click
• touchStart
• touchMove
• touchEnd
• mouseMove
• mouseOver
• mouseLeave
• drag相關事件

2. 不影響事件冒泡、捕獲，只是影響事件處理階段

inner元素被pointer-events: none;。點擊inner元素雖然其不觸發點擊事件，可是其父元素outer會觸發點擊事件。

3. 穿透效果

1. 
   Front元素被pointer-events: none;。點擊Front元素雖然其不觸發點擊事件，可是其Z軸底部的元素Backend會觸發點擊事件。也不影響Z軸底部的文本選擇。
2. 穿透效果應用場景：日期選擇組件的漸變效果
   
   上下兩端的漸變效果通常使用僞元素覆蓋上面，爲了避免影響滑動選擇日期，能夠給僞元素添加pointer-events: none;。

4. 移動端禁止長按圖片的系統彈窗

5. 應用在a標籤上能夠禁止hover效果，跳轉。

參考

1. CSS-TRICKS pointer-events
2. CSS3 pointer-events:none應用舉例及擴展