为什么TouchEnd事件在快速滑动后会重复触发？

程序员奕森提问于 2026-02-18 23:57:23 阅读 14

交互

我在做移动端滑动删除功能时，给元素绑定了touchstart和touchend事件。但发现当手指快速滑动后突然抬起，touchend会触发两次，导致删除逻辑执行两次。代码逻辑看起来没问题，但测试多次还是这样：


element.addEventListener('touchstart', (e) => {
  startX = e.touches[0].clientX;
});
element.addEventListener('touchend', (e) => {
  if (Math.abs(endX - startX) > 50) {
    console.log('执行删除'); // 这里会重复输出
  }
});

我尝试过加标志位防重，但滑动速度过快时标志位还没来得及重置。是不是touchend在某些情况下会被浏览器自动触发两次？或者需要结合touchcancel处理？

TouchEnd 手势操作

我来解答赞 8 收藏

反馈

1 条解答

IT人子荧 Lv1

这个问题主要是因为快速滑动时浏览器可能会触发多次touchend事件，建议结合标志位和时间戳来防抖。试试这个：

let isDeleting = false;

let lastTriggerTime = 0;



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

  startX = e.touches[0].clientX;

});



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

  const now = Date.now();

  if (isDeleting || now - lastTriggerTime < 300) return;

  isDeleting = true;

  lastTriggerTime = now;



  if (Math.abs(e.changedTouches[0].clientX - startX) > 50) {

    console.log('执行删除');

    // 模拟异步操作后重置状态

    setTimeout(() => isDeleting = false, 300);

  } else {

    isDeleting = false;

  }

});

记得根据实际需求调整时间间隔，300毫秒是个参考值。如果还遇到问题，可能需要结合touchcancel一起处理。

2026-02-19 00:00