1. 程式人生 > >移動端tap輕觸事件封裝

移動端tap輕觸事件封裝

  1. function my_tap(dom,callBack){  
    //第一不能超過延時時間,第二不能使移動  
    //獲取一些必要的值開始時間,延時時間,是否是移動  
        var startTime=0;  
        var delayTime=200;  
        var isMove=false;  
        dom.addEventListener("touchstart",function(event){  
            //記錄開始時間  
            startTime=Date.now();  
        });  
        dom.addEventListener("touchmove",function(event){  
            //如果發生了移動就改變isMove的值  
            isMove=true;  
        });  
        dom.addEventListener("touchend",function(event){  
            //如果發生了移動就不執行回撥  
            if(isMove) return;  
            //如果大於延時時間就不執行回撥函式  
            if(Date.now()-startTime>delayTime) return;  
            callBack(event);  
      
        });  
      
      
    }  

    在移動端(這裡小編還是強調一下把頁面變成移動端頁面千萬別忘記視口屬性viewport的設定)中我們的瀏覽器只認識三個事件(touchstart、touchmove、touchend),而我們使用其他的框架封裝的事件全都是使用這三個事件來封裝來的,那麼我們接下來就給大家拿一個例項來分析一下如何使用這三個基礎的函式來進行封裝!

       好現在我們來分析一下整個函式封裝的思路:如果是輕敲的話那必須滿足兩個條件:1.按住的事件不能超過延時時間2.不能再頁面中移動,也就是說不能出發touchmove事件