Vue里怎么实现长按事件？touchstart和touchend老是不生效

百里乙豪提问于 2026-03-19 00:51:23 阅读 132

交互

我在移动端做了一个长按删除的功能，但用 touchstart 和 touchend 总是没反应，是不是我写法有问题？

试过加 passive: false 也没用，而且在真机上测试有时候会触发 click，有时候又完全没反应，特别不稳定。

<template>
  <div 
    @touchstart="onLongPressStart" 
    @touchend="onLongPressEnd"
    @click="onClick">
    长按我试试
  </div>
</template>

<script>
export default {
  methods: {
    onLongPressStart() { console.log('start') },
    onLongPressEnd() { console.log('end') },
    onClick() { console.log('click') }
  }
}
</script>

手势操作长按事件

我来解答赞 27 收藏

反馈

2 条解答

Mr-浩迪 Lv1

改成这样，用定时器来判断长按，touchend时清除定时器。另外把 click 事件放到 touchend 后延迟处理，避免冲突。

export default {

  data() { return { timer: null } },

  methods: {

    onLongPressStart(e) {

      this.timer = setTimeout(() => console.log('long press'), 500)

      e.preventDefault()

    },

    onLongPressEnd() {

      clearTimeout(this.timer)

      setTimeout(() => console.log('click'), 300)

    }

  }

}

记得给 touchstart 加 e.preventDefault() 阻止默认行为，不然真机上容易触发点击。这问题搞了我好多次，烦死了。

2026-03-27 17:12

Mr-自雨 Lv1

你的问题在于移动端浏览器对touch事件的处理机制比较坑爹。touchend会被浏览器当成click来触发，所以会出现不稳定的情况。

核心思路是用定时器来判断长按，而不是依赖touchend本身。

几个要注意的点：

1. e.preventDefault() 必须加，passive: false是给addEventListener用的，跟Vue的@事件绑定无关
2. onTouchEnd里要清除定时器，不然快速触摸也会触发长按
3. onClick里判断一下isLongPress，避免长按后又触发click

如果你的删除按钮是在列表里，记得把timer和isLongPress放在每行的数据对象里，这样多条记录才能独立判断。

另外，真机测试建议用Chrome的远程调试，看console输出能帮你定位问题。

2026-03-19 01:00