1. 程式人生 > >一段封裝好的移動端點選事件的程式碼

一段封裝好的移動端點選事件的程式碼

/*封裝移動端的tap點選事件*/
var demo={
    /*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;
            /*來做一些與事件相關的初始化操作*/
        })

        /*touchend:當手指鬆開時候觸發,意味著當前元素上已經沒有手指物件了,所以無法通過targetTouches來獲取手指物件*/
        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 && callback(e);
            }
        })
    }
};