uni-app中@longpress事件存在平台兼容性问题，H5端需手动实现长按逻辑，微信/支付宝小程序可用但需防冒泡，APP端需注意元素拦截；应通过touchstart/touchend配合定时器实现500ms长按判定，并添加stopPropagation和震动反馈以提升体验。
@longpress 直接触发删除确认，但要注意平台兼容性
uni-app 的 @longpress 是最简路径，但它在 h5 和部分小程序平台（如微信）中默认不生效或响应延迟高，**必须配合 @touchstart/@touchend 手动实现长按逻辑才能稳定工作**。官方文档也明确说明：@longpress 在 h5 端仅支持 chrome 84+，且需开启 enablelongtap 配置；支付宝/百度小程序则完全不支持该事件。
所以别一上来就写 @longpress="deleteItem(index)"，否则上线后 H5 用户点半天没反应，微信里偶尔失灵——这是最常见的踩坑点。
- 微信/支付宝小程序：可用
@longpress，但建议加catch:longpress防冒泡干扰 - H5 端：必须用
@touchstart.prevent+setTimeout+@touchend.prevent清除定时器 - APP 端（iOS/Android）：
@longpress可用，但 iOS 上若元素内含input或scroll-view，可能被拦截，需加user-select: none
手动实现 500ms 长按判定，避免误触
核心是用 touchstart 启动一个 500ms 定时器，touchend 或 touchmove 时清除它。500ms 是平衡体验与容错的常见阈值——太短易误触发，太长用户感知迟钝。
关键代码片段：
data() {
return {
longPressTimer: null
}
},
methods: {
touchstart(index) {
this.longPressTimer = setTimeout(() => {
this.showDeleteConfirm(index)
}, 500)
},
touchend() {
clearTimeout(this.longPressTimer)
this.longPressTimer = null
},
touchmove() {
clearTimeout(this.longPressTimer)
this.longPressTimer = null
},
showDeleteConfirm(index) {
uni.showModal({
title: '提示',
content: '确定删除该项？',
success: (res) => {
if (res.confirm) {
this.itemList.splice(index, 1)
}
}
})
}
}
注意：touchstart 和 touchend 必须成对绑定在同一个元素上，且不能用 @click 混用——否则点击和长按会冲突。
删除前记得 stopPropagation，尤其嵌套列表或可点击区域
如果列表项里有按钮、图片、或外层包裹了 uni-popup / scroll-view，长按时事件容易冒泡到父级，导致弹窗重复打开、页面跳转或滚动中断。
解决方案很简单，在事件处理器开头加 event.stopPropagation()，或者模板中直接用 @touchstart.stop.prevent：
<view
v-for="(item, index) in itemList"
:key="index"
@touchstart.stop.prevent="touchstart(index)"
@touchend.stop.prevent="touchend"
@touchmove.stop.prevent="touchmove"
>
{{ item }}
</view>
另外，若使用 uni-app 的 uni-popup 组件做删除确认弹窗，务必设 :mask-click="false"，否则点击蒙层也会触发 touchend，造成定时器未清空而误删。
真机调试时震动反馈别漏掉
用户长按后无任何反馈，会怀疑是否操作成功。iOS/Android APP 端可用 uni.vibrateShort() 做轻震提示，增强交互可信度。
把它加在 showDeleteConfirm 调用前即可：
showDeleteConfirm(index) {
// 先震动，再弹窗，提升感知
uni.vibrateShort({ fail: () => {} }) // fail 忽略，避免低版本报错
uni.showModal({
// ...其余配置
})
}
注意：uni.vibrateShort 在 H5 和小程序中无效，只对原生 APP 生效；微信小程序要用 wx.vibrateShort（需适配），而 uni-app 封装已做了平台判断，直接调用即可。
真正麻烦的是多端一致性：H5 没震动，只能靠 UI 动画（比如长按时加个 scale 变化）；小程序没震动，就得靠文字提示“长按已识别”。这些细节，上线前必须在三端真机跑一遍，模拟器测不出来。
