[jQuery] Zepto的點透問題如何解決？

1、“點透”是什么你可能碰到過在列表頁面上創建一個彈出層，彈出層有個關閉的按鈕，你點了這個按鈕關閉彈出層后后，這個按鈕正下方的內容也會執行點擊事件（或打開鏈接）。這個被定義為這是一個“點透”現象。在前面的項目中遇到了如下圖的問題：在點擊彈出來的選擇組件的右上角完成后會讓完成后面的input輸入框聚焦，彈出輸入鍵盤，也就是點透了2、為什么會出現點透呢？ 這個需要從zepto(或者jqm)源碼里面看關于tap的實現方法： View Code可以看出zepto的tap通過兼聽綁定在document上的touch事件來完成tap事件的模擬的,及tap事件是冒泡到document上觸發的再點擊完成時的tap事件(touchstart\touchend)需要冒泡到document上才會觸發，而在冒泡到document之前，用戶手的接觸屏幕(touchstart)和離開屏幕(touchend)是會觸發click事件的,因為click事件有延遲觸發(這就是為什么移動端不用click而用tap的原因)(大概是300ms,為了實現safari的雙擊事件的設計)，所以在執行完tap事件之后，彈出來的選擇組件馬上就隱藏了，此時click事件還在延遲的300ms之中，當300ms到來的時候，click到的其實不是完成而是隱藏之后的下方的元素，如果正下方的元素綁定的有click事件此時便會觸發，如果沒有綁定click事件的話就當沒click，但是正下方的是input輸入框(或者select選擇框或者單選復選框)，點擊默認聚焦而彈出輸入鍵盤，也就出現了上面的點透現象。3、點透的解決方法：方案一：來得很直接github上有個fastclick可以完美解決https://github.com/ftlabs/fastclick引入fastclick.js，因為fastclick源碼不依賴其他庫所以你可以在原生的js前直接加上1 window.addEventListener( "load", function() { 2 FastClick.attach( document.body ); 3 }, false );或者有zepto或者jqm的js里面加上1 $(function() { 2 FastClick.attach(document.body); 3 });當然require的話就這樣：1 var FastClick = require('fastclick'); 2 FastClick.attach(document.body, options);方案二：用touchend代替tap事件并阻止掉touchend的默認行為preventDefault()1 $("#cbFinish").on("touchend", function (event) { 2 //很多處理比如隱藏什么的 3 event.preventDefault(); 4 });方案三：延遲一定的時間(300ms+)來處理事件1 $("#cbFinish").on("tap", function (event) { 2 setTimeout(function(){ 3 //很多處理比如隱藏什么的 4 },320); 5 }); 這種方法其實很好，可以和fadeInIn/fadeOut等動畫結合使用，可以做出過度效果理論上上面的方法可以完美的解決tap的點透問題，如果真的倔強到不行，用click

個人簡介

我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關前端面試題

總結

以上是生活随笔為你收集整理的[jQuery] Zepto的点透问题如何解决？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。