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

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

交互

我在移动端做了一个长按删除的功能，但用 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>

手势操作长按事件

我来解答赞 15 收藏

反馈

1 条解答

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