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

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

移动

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

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

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

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

我来解答赞 2 收藏

反馈

1 条解答

亚捷 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