版權聲明：本文爲博主原創文章，未經博主允許不得轉載。如有轉載請留言，謝謝~ https://blog.csdn.net/qq_38209578/article/details/81389667
最近有遇到前端事件點擊穿透的問題，拿來跟大家分享一下。
1.問題描述：
情景一：蒙層點擊穿透問題，點擊蒙層（mask）上的關閉按鈕，蒙層消失後發現觸發了按鈕下面元素的click事件。
情景二：跨頁面點擊穿透問題：如果按鈕下面恰好是一個有href屬性的a標籤，那麼頁面就會發生跳轉。
情景三：另一種跨頁面點擊穿透問題：這次沒有mask了，直接點擊頁內按鈕跳轉至新頁，然後發現新頁面中對應位置元素的click事件被觸發了。
情景四：不過概率很低，就是新頁面中對應位置元素恰好是a標籤，然後就發生連續跳轉了。
2.解決方法：
方法一：書寫規範問題，不要混用touch和click。既然touch之後300ms會觸發click，只用touch或者只用click就自然不會存在問題了。
方法二：吃掉（或者說是消費掉）touch之後的click，依舊用tap，只是在可能發生點擊穿透的情形做額外的處理，拿個東西來擋住、或者tap後延遲350毫秒再隱藏mask、pointer-events、在下面元素的事件處理器裏做檢測（配合全局flag）等。
3.個人建議：
此處，我所使用的是方法一，這樣是讓自己的書寫更規範，所以移動端我統一使用Tap事件。
4.特殊情況的處理：
4.1 在點擊事件後面加@tap.stop=”search()”，此處的是VUE的開發示例，不同的編程可以自行調整。
4.2 在點擊事件後面加@tap=”search($event)”
search:function(e){
e.preventDefault();
}