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

最新推荐文章于 2025-04-14 16:58:16 发布

原创最新推荐文章于 2025-04-14 16:58:16 发布 · 1.2w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#touchend

JavaScript 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一种在移动端页面中优化touchend事件的方法，通过阻止页面滚动时touchend事件的冒泡来避免误操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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