M端再次遇到點透

2022-05-09 08:30:16 字數 1225 閱讀 6342

可以看出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可以完美解決

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

1 window.addeventlistener( "load", function() , false );

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

1 $(function() );

當然require的話就這樣:

1 var fastclick = require('fastclick');

2 fastclick.attach(document.body, options);

方案二:用touchend代替tap事件並阻止掉touchend的預設行為preventdefault()

1 $("#cbfinish").on("touchend", function (event) );

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

1 $("#cbfinish").on("tap", function (event) ,320);

5 });

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

理論上上面的方法可以完美的解決tap的點透問題,如果真的倔強到不行,用click

關於點到點和端到端

端到端 end to end 和點到點 point to point 是描述網路傳輸中對等實體之間關係的兩個概念。端到端系統 初始信源機上的某實體與最終信宿機的對等實體直接通訊,彼此之間就像擁有一條直接線路,而不管傳輸要經過多少imp。如基於tcp ip的smtp協議。點到點系統 對等實體之間的通訊...

點到點通訊與端到端通訊

點到點是資料鏈路層的說法,因為資料鏈路層只負責直接相連的兩個節點之間的通訊,乙個節點的資料鏈路層接受ip層資料並封裝之後,就把資料幀從鏈路上傳送到與其相鄰的下乙個節點。端到端是傳輸層的說法,因為無論tcp還是udp,都要負責吧上層交付的資料從傳送端傳輸到接收端,不論其中間跨越多少節點。只不過tcp比...

認識點到點和端到端通訊

什麼是端到端通訊?答 要深刻了解端到端通訊,就首先要對網路的協議層有個了解。網路協議最低端的三個層是物理層,資料鏈路層和網路層。他們都不是端到端的,因為他們相互連線的節點是路由器,是通過路由器將資料傳向目的地的。而到了傳輸層才是真正的端到端,因為在這一層以及這一層以上的資料,是直接由終端1傳到終端2...