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

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

移动

在移动端项目里用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 收藏

反馈

2 条解答

爱学习的晨妍 Lv1

你这个问题其实是 @vueuse/core 的 usePress 文档没写清楚的地方，它不是直接绑定到 DOM 元素上的事件，而是需要你自己在模板里监听原生事件再调用，或者更简单的——用它返回的绑定对象。

现在这样写根本没把 press 事件绑定到按钮上，usePress 返回的是一个对象，里面包含 onPress、onRelease 等 handler，但不会自动挂到 DOM 上。

这样更清晰：

import { ref } from 'vue'

import { usePress } from '@vueuse/core'



const pressTarget = ref(null)

const { onPress } = usePress(pressTarget, {

  onPress: () => {

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

  }

})

然后模板里写成：

<button ref="pressTarget" v-on="onPress">长按我</button>

或者如果你用的是 Vue 3.4+，可以写得更优雅一点：

<button ref="pressTarget" v-bind="onPress">长按我</button>

注意是 v-on 或 v-bind，不是 @press，usePress 不会往组件上挂自定义事件，它只是给你一套 handler，你自己决定怎么挂上去。

另外确认一下：你的项目是不是在桌面浏览器里测的？usePress 默认是针对触摸设备优化的，PC 上可能需要长按 + 移动鼠标才会触发，或者加 touch: false 配置让它支持鼠标长按：

usePress(pressTarget, { onPress, touch: false })

这样基本就能触发了。

2026-02-24 18:11

诗谣🍀 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