touchend 事件在滚动时为什么会误触发？

司空雪琪提问于 2026-02-24 15:42:21 阅读 39

移动

我在做一个移动端的滑动删除功能，绑定了 touchstart 和 touchend 来判断用户是否轻扫。但发现只要手指在列表上滚动一下，即使没抬起，也会触发 touchend，导致误删。这是为啥？

我试过加 e.preventDefault()，也检查了是不是冒泡问题，但都没用。下面是我给列表项加的样式：

.swipe-item {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

难道是 touch-action 设置不对？还是得配合其他手势判断？

我来解答赞 3 收藏

反馈

2 条解答

FSD-颖杰 Lv1

我之前也遇到过。touchend 在滚动时被触发是因为滚动本身也会结束触摸。解决办法是在 touchstart 时记录一个时间戳，touchend 时判断如果时间差很小就认为是轻扫，否则忽略。代码如下：

let startTime;

document.querySelector('.swipe-item').addEventListener('touchstart', (e) => {

  startTime = Date.now();

});

document.querySelector('.swipe-item').addEventListener('touchend', (e) => {

  if (Date.now() - startTime < 200) {

    // 轻扫逻辑

  }

});

2026-03-23 09:29

亚捷 Dev Lv1

改成这样：

let startX = 0

let startY = 0

let isScrolling = false



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

  startX = e.touches[0].clientX

  startY = e.touches[0].clientY

  isScrolling = false

})



element.addEventListener('touchmove', e => {

  const dx = e.touches[0].clientX - startX

  const dy = e.touches[0].clientY - startY

  if (Math.abs(dy) > Math.abs(dx) && Math.abs(dy) > 10) {

    isScrolling = true

  }

})



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

  if (isScrolling) return

  // 执行删除逻辑

})

2026-02-24 16:05