資訊專欄INFORMATION COLUMN
摘要：移動端經常出現點透，至于怎么出現的請大家去看一下實現的源碼。點透是什么你可能碰到過在列表頁面上創建一個彈出層，彈出層有個關閉的按鈕，你點了這個按鈕關閉彈出層后后，這個按鈕正下方的內容也會執行點擊事件或打開鏈接。這個被定義為這是一個點透現象。
移動端經常出現點透，至于怎么出現的請大家去看一下zepto實現tap的源碼。
1、“點透”是什么你可能碰到過在列表頁面上創建一個彈出層，彈出層有個關閉的按鈕，你點了這個按鈕關閉彈出層后后，這個按鈕正下方的內容也會執行點擊事件（或打開鏈接）。這個被定義為這是一個“點透”現象。
2.為什么會出現點透zepto的tap通過兼聽綁定在document上的touch事件來完成tap事件的模擬的,及tap事件是冒泡到document上觸發的
再點擊完成時的tap事件(touchstarttouchend)需要冒泡到document上才會觸發，而在冒泡到document之前，用戶手的接觸屏幕(touchstart)和離開屏幕(touchend)是會觸發click事件的,因為click事件有延遲觸發(這就是為什么移動端不用click而用tap的原因)(大概是300ms,為了實現safari的雙擊事件的設計)，
所以在執行完tap事件之后，彈出來的選擇組件馬上就隱藏了，此時click事件還在延遲的300ms之中，當300ms到來的時候，click到的其實不是完成而是隱藏之后的下方的元素，如果正下方的元素綁定的有click事件此時便會觸發，如果沒有綁定click事件的話就當沒click，但是正下方的是input輸入框(或者select選擇框或者單選復選框)，點擊默認聚焦而彈出輸入鍵盤，也就出現了上面的點透現象
方案一：來得很直接github上有個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);
方案二：用touchend代替tap事件并阻止掉touchend的默認行為preventDefault()
$("#cbFinish").on("touchend", function (event) {
//很多處理比如隱藏什么的
event.preventDefault();
});
方案三：延遲一定的時間(300ms+)來處理事件
$("#cbFinish").on("tap", function (event) {
setTimeout(function(){
//很多處理比如隱藏什么的
},320);
});
這種方法其實很好，可以和fadeInIn/fadeOut等動畫結合使用，可以做出過度效果
理論上上面的方法可以完美的解決tap的點透問題，如果真的倔強到不行，用click
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/93511.html
摘要：梳理一下事件的順序就是在中執行回調點透的原理常見到有這種應用場景，點擊遮罩層，遮罩層消失，露出底部的頁面。點透的解決方案統一使用事件，或者事件。 首先介紹tap事件： tap事件的意義：在移動端，click事件會有300ms延遲，因為瀏覽器通過判斷300ms內是否會繼續點擊，來判斷是否縮放網頁。（即雙擊放大網頁的效果有一個300ms的時間來判斷，300ms過去了，才會觸發click事...
摘要：移動端經常出現點透，至于怎么出現的請大家去看一下實現的源碼。點透是什么你可能碰到過在列表頁面上創建一個彈出層，彈出層有個關閉的按鈕，你點了這個按鈕關閉彈出層后后，這個按鈕正下方的內容也會執行點擊事件或打開鏈接。這個被定義為這是一個點透現象。 移動端經常出現點透，至于怎么出現的請大家去看一下zepto實現tap的源碼。 1、點透是什么 你可能碰到過在列表頁面上創建一個彈出層，彈出層有個關...
閱讀 2749·2021-11-24 09:39
閱讀 1654·2021-09-28 09:35
閱讀 1124·2021-09-06 15:02
閱讀 1316·2021-07-25 21:37
閱讀 2733·2019-08-30 15:53
閱讀 3651·2019-08-30 14:07
閱讀 721·2019-08-30 11:07
閱讀 3524·2019-08-29 18:36
