uni-app中 @longpress 长按事件在pc端使用无效

uni-app中 @longpress 长按事件在pc端使用无效

开发环境 版本号 项目创建方式
Windows win7 HBuilderX

示例代码：

<view v-for="(row, i) in data" :key="i" @tap="confirmDelete(row)" [@longpress](/user/longpress)="test">
    <image src="../../static/logo.jpg"></image>
</view>

操作步骤：

不管[@longpress](/user/longpress)="test"长按事件方法放图片上还是view上，鼠标左键长按都无效，如果使用手机模拟器就有效果。

预期结果：

pc端和移动端都可以实现长按事件，不然自己写Vue.directive('longpress'代码不一致还不能区分移动端和PC端。

实际结果：

pc端长按无效，移动端和小程序等没问题。

bug描述：

使用uniCloud admin 在PC端上使用长按[@longpress](/user/longpress)事件，没有响应结果。


更多关于uni-app中 @longpress 长按事件在pc端使用无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

解决了吗，遇到相同的问题

更多关于uni-app中 @longpress 长按事件在pc端使用无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，@longpress事件确实主要针对移动端设备设计，依赖触摸事件（touchstart、touchend）触发。PC端使用鼠标操作时，默认不触发此事件，这是框架的预期行为，而非bug。

解决方案：

  1. 条件编译区分平台：使用#ifdef和#ifndef指令为PC端和移动端编写不同的事件逻辑。

    <view 
  @touchstart="platform === 'mobile' ? startTimer : null"
  @mousedown="platform === 'pc' ? startTimer : null"
  @touchend="platform === 'mobile' ? clearTimer : null"
  @mouseup="platform === 'pc' ? clearTimer : null"
>

    在脚本中通过uni.getSystemInfoSync().platform判断平台，并实现计时器模拟长按。

  2. 统一事件处理：封装混合（mixin）或工具函数，内部根据平台自动选择mousedown/mouseup或touchstart/touchend，并设置延时（如500ms）触发回调。例如：

    methods: {
  handleLongPress(e) {
    if (this.platform === 'pc') {
      // PC端用鼠标事件
    } else {
      // 移动端用触摸事件
    }
  }
}
回到顶部