解決移動端點擊穿透問題_h5實現移動端點擊事件穿透的多種解決方案

移動端點透點透現象出現的場景:

當A/B兩個層上下z軸重疊，上層的A點擊后消失或移開（這一點很重要），並且B元素本身有默認click事件（如a標簽）或綁定了click事件。在這種情況下，點擊A/B重疊的部分，就會出現點透的現象。

點透現象出現的原因：

zepto的tap事件是通過兼聽綁定在document上的touch事件來完成tap事件的模擬的，並且tap事件是冒泡到document上觸發的！！！在移動端不使用click而用touch事件代替觸摸是因為click事件有着明顯的延遲，具體touchstart與click的區別如下：

touchstart：在這個DOM（或冒泡到這個DOM）上手指觸摸開始即能立即觸發；
click：在這個DOM（或冒泡到這個DOM）上手指觸摸開始，且手指未曾在屏幕上移動（某些<a href=”http://”>瀏覽器</a>允許移動一個非常小的位移值），且在這個DOM上手指離開屏幕，且觸摸和離開屏幕之間的間隔時間較短（某些瀏覽器不檢測間隔時間，也會觸發click）才能觸發

 

也就是說，在移動端事件的觸發時間按由早到晚排列為：touchstart 早於 touchend 早於 click。亦即click的觸發是有延遲的，這個時間大概在300ms左右。由於我們在touchstart階段就已經隱藏了罩層A，當click被觸發時候，能夠被點擊的元素則是其下的B元素，根據click事件的觸發規則：只有在被觸發時，當前有click事件的元素顯示，且在面朝用戶的最前端時，才觸發click事件。由於B綁定了click事件（或者B本身默認存在click事件），所以B的click事件被觸發，產生了點透的情況。

點透現象解決方案：

解決方案一：來得很直接github上有個fastclick可以完美解決
引入fastclick.js，因為fastclick源碼不依賴其他庫所以你可以在原生的js前直接加上

window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );

　　

資源網站搜索大全https://55wd.com

或者有zepto或者jqm的js里面加上

$(function() {
FastClick.attach(document.body);
});

　　

 

當然require的話就這樣：

var FastClick = require(‘fastclick‘);
FastClick.attach(document.body, options);

　　

 

解決方案二：對於B元素本身存在默認click事件的情況，應及用touchend代替tap事件並阻止掉時A元素touchend的默認行為preventDefault()，從而阻止click事件的產生。

$("#aa").on("touchend", function (event) { //很多處理比如隱藏什么的 event.preventDefault(); });

對於B元素本身沒有默認click事件的情況（無a標簽等），應統一使用touch事件，統一代碼風格，並且由於click事件在移動端的延遲要大很多，不利於用戶體驗，所以關於觸摸事件應盡量使用touch相關事件。

解決方案三：延遲一定的時間(300ms+)來處理事件

$("#aa").on("tap", function (event) { setTimeout(function(){ //很多處理比如隱藏什么的 },320); });

 

這種方法其實很好，可以和fadeInIn/fadeOut等動畫結合使用，可以做出過度效果

解決方案四： 理論上上面的方法可以完美的解決tap的點透問題，如果真的倔強到不行，改用click。特別是對於遮蓋浮層，由於遮蓋浮層的點擊即使有小延遲也是沒有關系的，反而會有疑似更好的用戶體驗，所以這種情況，可以針對遮蓋浮層自己采用click事件，這樣就不會出現點透問題。