zepto之tap事件點透問題分析及解決方案


點透現象出現的場景:

  當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://www.jd.com”>瀏覽器</a>允許移動一個非常小的位移值),且在這個DOM上手指離開屏幕,且觸摸和離開屏幕之間的間隔時間較短(某些瀏覽器不檢測間隔時間,也會觸發click)才能觸發

  也就是說,在移動端事件的觸發時間按由早到晚排列為:touchstart 早於 touchend 早於 click。亦即click的觸發是有延遲的,這個時間大概在300ms左右。

  由於我們在touchstart階段就已經隱藏了罩層A,當click被觸發時候,能夠被點擊的元素則是其下的B元素,根據click事件的觸發規則:只有在被觸發時,當前有click事件的元素顯示,且在面朝用戶的最前端時,才觸發click事件。由於B綁定了click事件(或者B本身默認存在click事件),所以B的click事件被觸發,產生了點透的情況。

點透現象解決方案:

解決方案一:來得很直接github上有個fastclick可以完美解決https://github.com/ftlabs/fastclick

引入fastclick.js,因為fastclick源碼不依賴其他庫所以你可以在原生的js前直接加上

 window.addEventListener( "load", function() {

     FastClick.attach( document.body );

 }, false );

或者有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事件,這樣就不會出現點透問題。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2026 CODEPRJ.COM