tap事件的原理詳解

點擊事件延遲問題所在:

在移動端中,由於兩次觸摸是放大操作,,所以當你點擊一次的時候,瀏覽器會等待300ms,看用戶是否會進行第二次點擊,如果沒有的話,才會執行點擊事件

為什么要解決:

隨着h5游戲,移動端網頁的流行,用戶對web網頁的性能也隨着提高,點擊事件的延遲會影響用戶體驗,尤其是在游戲中,這是個大忌.

 

這是因為這個問題的存在,所以出現了tap事件,tap事件對應的是在移動端中的.

tap事件的原理:

tap事件的原理其實是源於觸摸touch事件,在移動觸摸事件就是在同個點觸發,及touchmove的距離距離touchstar的距離為0,並且點擊的時間不超過某個設定的時間值,超過該時間值的話,就屬於長按了

下面我封裝了一個事件,模擬tap事件的原理:

    //封裝tap的方法
    function tap(ele,callBack){
        //觸摸開始的時間
        var startTime=0;
        //定義touchmove是否觸發
        var ismove=false;
        var maxTime=250;
        ele.addEventListener('touchstart',function(e){
            startTime=Date.now();
            ismove=false;
        }) 
        ele.addEventListener('touchmove',function(e){
            //觸發就賦值為true
            ismove=true;
        }) 
        ele.addEventListener('touchend',function(e){
            //判斷是否是touchmove是否觸發
            if (ismove) {
                return;
            }
            // 判斷是否為長按
            if ((Date.now()-startTime)>maxTime) {
                return;
            }

        // 如果能夠到這里
        callBack(e);
        }) 
    
    }