移動端-點透問題 巧妙解決

移動端常常出現點透，至於怎麼出現的請你們去看一下zepto實現tap的源碼。

一、「點透」是什麼

你可能碰到過在列表頁面上建立一個彈出層，彈出層有個關閉的按鈕，你點了這個按鈕關閉彈出層後後，這個按鈕正下方的內容也會執行點擊事件（或打開連接）。這個被定義爲這是一個「點透」現象。

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選擇框或者單選複選框)，點擊默認聚焦而彈出輸入鍵盤，也就出現了上面的點透現象

3.點透的解決方法：

方案一：來得很直接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