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

問題

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

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

解決方法

解決方法很簡單，就是在頁面滾動時中止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。