100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 移动端页面滚动后不触发touchend事件

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

时间:2022-12-19 14:33:35

相关推荐

移动端页面滚动后不触发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;}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。