移動端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事件

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章