为什么Vue手势识别的Press事件无法触发？

❤晓萌提问于 2026-02-12 00:53:27 阅读 23

移动

在移动端项目里用Vue3和@vueuse/core的usePress做长按操作，但按了按钮完全没反应…

代码是这样写的：


<template>
  <button ref="pressTarget" @press="handlePress">长按我</button>
</template>

<script setup>
import { ref } from 'vue'
import { usePress } from '@vueuse/core'

const pressTarget = ref(null)
const handlePress = () => {
  console.log('长按触发了！')
}
usePress(pressTarget, { onPress: handlePress })

按理说应该没问题啊，但点击按钮就是不触发，控制台也没有报错。我试过把事件改成@click就正常，但需要长按功能。是不是哪里配置错了？

我来解答赞 7 收藏

反馈

1 条解答

诗谣🍀 Lv1

你这个写法看着没问题，其实错在事件绑定方式。@press 这种语法糖根本不存在，usePress 是组合式 API，不是指令也不是原生事件。

标准写法是 usePress 接收一个 ref 和回调函数，它内部会自动监听 pointer 事件并判断长按逻辑，不需要也不能用 @press 绑定。

你现在模板里写的 @press="handlePress" 实际上被 Vue 当成了自定义事件，但组件没emit这个事件，所以当然没反应。

正确改法：

<template>

  <button ref="pressTarget">长按我</button>

</template>



<script setup>

import { ref } from 'vue'

import { usePress } from '@vueuse/core'



const pressTarget = ref(null)



usePress(pressTarget, {

  onPress() {

    console.log('长按触发了！')

  }

})

</script>

注意三点：
第一，去掉模板里的 @press；
第二，确保 pressTarget 的 ref 已经正确绑定到元素上；
第三，usePress 的第二个参数对象里直接写 onPress 回调。

另外提醒一句，usePress 默认长按时间是 600ms，可以在 options 里通过 duration 修改，别自己测的时候按太短以为没生效。

2026-02-12 00:54