解决移动端页面滚动后不触发touchend事件

解决移动端页面滚动后不触发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。

相关推荐

移动更换SIM卡教程:线上线下两种方式,详细步骤讲解
静物的构图摆放方法
www.28365-365

静物的构图摆放方法

📅 07-03 👁️ 8148
揭秘:表叔这一亲戚称谓背后的家族关系!
365商城官网

揭秘:表叔这一亲戚称谓背后的家族关系!

📅 08-12 👁️ 3603