解決移動端頁面滾動後不觸發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。