解決移動端頁面滾動後不觸發touchend事件

解決移動端頁面滾動後不觸發touchend事件

問題

在移動端頁面進行優化時，通常使用touch事件替代鼠標相關事件。用的較多的是使用touchend事件替代PC端的click和mouseup事件。

但是，touchend事件在頁面滾動時有個問題。在滾動完畢後，假設當前觸點的位置所指的元素綁定了touchend事件，這時便會觸發該元素的touchend事件，形成誤操做。

解決方法

解決方法很是easy。就是在頁面滾動時中止touchend事件冒泡。這樣就可以防止觸發touchend事件。

用法

引入該函數並進行調用。

function stopTouchendPropagationAfterScroll(){
    var locked = false;

    window.addEventListener('touchmove', function(ev){
        locked || (locked = true, window.addEventListener('touchend', stopTouchendPropagation, true));
    }, true);
    function stopTouchendPropagation(ev){
        ev.stopPropagation();
        window.removeEventListener('touchend', stopTouchendPropagation, true);
        locked = false;
    }
}

另外說明

在移動端，scroll事件是在滾動結束後纔會觸發一次。而touchmove事件是在滑動過程當中屢次觸發。使用scroll會比使用touchmove在性能上有必定優化。

但是。上面代碼之因此不用scroll事件，而用touchmove事件。是爲了同一時候適用於小於一個屏幕高度的頁面。因此也是不得已使用touchmove。