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

令狐桠豪 阅读 7

我在做移动端的滑动手势,监听了 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 事件?比如页面滚动或者别的手势冲突?

我来解答 赞 2 收藏
二维码
手机扫码查看
1 条解答
司空玉鑫
手指滑出元素区域时 touchend 不会在原元素上触发,而是触发 touchcancel。加上 touchcancel 监听就完了。

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


或者干脆在 document 上监听 touchend,别绑在元素上。
点赞
2026-02-28 19:00