您的位置:首页 > 移动开发

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

2016-03-11 16:17 513 查看

在移动端页面进行优化时,一般使用touch事件替代鼠标相关事件,用的较多的是使用touchend事件替代PC端的click和mouseup事件。

但是,touchend事件在页面滚动时有个问题。在滚动完成后,如果当前触点的位置所指的元素绑定了touchend事件,这时便会触发该元素的touchend事件,造成误操作。

解决方法是在滚动时就给停止touchend事件冒泡,实现如下:

stopTouchendPropagationAfterScroll();
function stopTouchendPropagationAfterScroll(){
var flag = false;
window.addEventListener('touchmove', function(ev){
flag || (flag = true, window.addEventListener('touchend', stopTouchendPropagation, true));
}, false);
function stopTouchendPropagation(ev){
ev.stopPropagation();
setTimeout(function(){
window.removeEventListener('touchend', stopTouchendPropagation, true);
flag = false;
}, 50);
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: