基于觸屏事件來封裝移動端的點選事件，解決click事件在移動端的延時問題。

并不是說click事件在移動端有效率上問題，而是因為在移動端需要判斷執行單擊操作還是輕按兩下操作。早期移動裝置浏覽器網頁時内容非常小，為了增強使用者體驗，蘋果公司專門為移動裝置設計了輕按兩下放大的功能，確定使用者可以非常友善的放大網頁内容，但是當使用者單擊一個按鈕時，移動裝置會延時（約300ms）執行，判斷使用者是否要輕按兩下。用觸屏事件可以解決這個問題。

1.首先要知道單擊是什麼，怎樣算的上點選操作？

（1）螢幕上隻有一根手指（區分輕按兩下或多擊）

（2）判斷按下的時間（區分長按事件）

（3）判斷按下的位置與離開的位置之間的差距，允許一定範圍呢的誤差（區分滑動事件）

2.既然我們已經知道了這一點那麼我們就來封裝我們自己的 單擊事件。

var startTime,startX,startY;
        dom.addEventListener("touchstart",function(e){
            /*判斷是否隻有一根手指進行操作*/
            if(e.targetTouches.length > 1){
                return;
            }
            /*記錄手指開始觸摸的時間*/
            startTime=Date.now();
            /*記錄目前手指的坐标*/
            startX= e.targetTouches[0].clientX;
            startY= e.targetTouches[0].clientY;
        })
           

div.addEventListener("touchend",function(e){
        /*判斷是否隻有一根手指進行操作*/
        if(e.changedTouches.length > 1){ //說明不止一個手指
            return;
        }
        /*判斷時間差異  150ms*/
        console.log(Date.now()-startTime);
        if(Date.now()-startTime > 150){ //長按操作
            return;
        }
        /*判斷松開手指時的坐标與觸摸開始時的坐标的距離差異*/
        var endX=e.changedTouches[0].clientX;
        var endY=e.changedTouches[0].clientY;
        /*這裡暫且将距離差異定為6*/
        if(Math.abs(endX-startX) < 6 && Math.abs(endY-startY) <6){
            console.log("這就是移動端的單擊事件--tap事件");
        }
    })
           

把上面的判斷條件封裝在你函數中，代碼如下

var myTap={
    //dom:傳入的dom元素讓我們可以為任意的元素添加tap事件
    tap:function(dom,callback){
       // 判斷是否傳入對象同時對象應該是一個dom元素
        if(!dom || typeof  dom!="object"){
            return;
        }
        var startTime,startX,startY;
        dom.addEventListener("touchstart",function(e){
            /*判斷是否隻有一根手指進行操作*/
            if(e.targetTouches.length > 1){
                return;
            }
            /*記錄手指開始觸摸的時間*/
            startTime=Date.now();
            /*記錄目前手指的坐标*/
            startX= e.targetTouches[0].clientX;
            startY= e.targetTouches[0].clientY;
        })
        dom.addEventListener("touchend",function(e){
            //判斷是否隻有一根手指進行操作
            if(e.changedTouches.length > 1){
                return;
            }
            if(Date.now()-startTime > 150){ //長按操作
                return;
            }
            //判斷松開手指時的坐标與觸摸開始時的坐标的距離差異
            var endX=e.changedTouches[0].clientX;
            var endY=e.changedTouches[0].clientY;
            //這裡暫且将距離差異定為6
            if(Math.abs(endX-startX) < 6 && Math.abs(endY-startY) <6){
                //判斷使用者是否傳入的回調函數
                callback &&(typeof callback === 'function') &&callback(e);
            }
        })
    }
};
           

以上就是我們自己封裝的移動端單擊事件，我們習慣上叫他tap事件。