TouchEnd 事件在滑动后不触发是怎么回事？

令狐桠豪提问于 2026-02-27 20:53:20 阅读 38

交互

我在做移动端的滑动手势，监听了 touchstart 和 touchmove，但有时候手指滑动结束时 touchend 根本没触发，这是为啥？

我试过在 touchmove 里加 event.preventDefault()，但加上之后 touchend 更不稳定了，有时候完全收不到。代码大概是这样：

element.addEventListener('touchstart', handleStart);
element.addEventListener('touchmove', (e) => {
  // e.preventDefault(); // 注释掉反而有时能触发 touchend
  handleMove(e);
});
element.addEventListener('touchend', handleEnd);

是不是某些操作会“吃掉” touchend 事件？比如页面滚动或者别的手势冲突？

我来解答赞 5 收藏

反馈

2 条解答

慕容爱静 Lv1

哈，这个坑我踩过。根本原因是当 touchmove 移动距离超过浏览器阈值时，系统会认为你在滚动页面，这时候 touchend 会被吞掉。WordPress 移动端开发经常遇到。

解决方法是在 touchstart 里先阻止默认行为，但别在 touchmove 里阻止。这样既能保证滑动顺畅，又能收到 touchend：

element.addEventListener('touchstart', (e) => {

  e.preventDefault();

  handleStart(e);

});



element.addEventListener('touchmove', handleMove);

element.addEventListener('touchend', handleEnd);

另外建议加个 touchcancel 监听，有时候系统中断触摸事件会触发这个而不是 touchend。

顺便吐槽下，移动端触摸事件真是各种坑，我上次做轮播图的时候 debug 到凌晨两点，就因为 touchend 没触发...

2026-03-09 18:27

司空玉鑫 Lv1

手指滑出元素区域时 touchend 不会在原元素上触发，而是触发 touchcancel。加上 touchcancel 监听就完了。

element.addEventListener('touchend', handleEnd);

element.addEventListener('touchcancel', handleEnd); // 加上这行

或者干脆在 document 上监听 touchend，别绑在元素上。

2026-02-28 19:00