uni-app 不支持原生双击事件,因非H5端(小程序/App)不识别@dblclick且静默失效;H5端虽可用但受样式、冒泡等限制;可靠方案是@click+时间戳判断,H5复制失败时降级用临时textarea;长按比双击更跨端稳定。

uni-app 没有原生双击事件(@dblclick)支持,H5 端虽有 DOM dblclick,但小程序和 App 端完全不识别;直接监听双击不可行,必须用「单击 + 时间间隔」模拟。
为什么不能直接用 @dblclick
uni-app 的事件系统在非 H5 平台(微信/支付宝小程序、App)中不暴露 dblclick,@dblclick 绑定后静默失效,无报错也无回调。即使 H5 端能触发,也会因平台样式拦截(如 user-select: none)、父容器阻止冒泡、或 view 包裹导致事件无法透传到 text 而失败。
用 @click + 时间戳判断双击的可靠写法
核心是记录上一次点击时间,在当前点击时比对间隔是否 text 或外层 view)上,且避免被 pointer-events: none 或 overflow: hidden 截断。
- 给文本容器加
@click="handleClick",不要只绑在text上(小程序中text默认不响应 click) - 在
data中声明lastClickTime: 0 -
handleClick内做判断:const now = Date.now(); if (now - this.lastClickTime < 300) { // 触发复制 uni.setClipboardData({ data: this.targetText, success: () => uni.showToast({ title: '已复制', icon: 'none' }) }); } else { this.lastClickTime = now; } - 若文本来自
v-for渲染,确保this.targetText是闭包安全的——推荐把文本作为参数传入:@click="handleClick(item.content)"
H5 端双击复制的额外限制
H5 下 uni.setClipboardData 依赖用户手势上下文,但「模拟双击」本身不构成连续可信操作,部分安卓 WebView 或微信内置浏览器会拒绝写入剪贴板,表现为静默失败(fail 回调也不触发)。此时必须降级为手动选中 + document.execCommand('copy'),但该 API 已废弃,仅作兜底:
- 创建临时
<textarea>插入 body,select()后执行document.execCommand('copy') - 仅在
uni.setClipboardData的fail回调中尝试(H5 端才进 fail) - 需确保页面是 HTTPS,否则现代浏览器直接禁用
双击 vs 长按:哪个更稳?
双击逻辑容易误触(尤其小屏设备),且跨端一致性差;而 @longpress 是 uni-app 原生支持的跨平台事件,在小程序真机、App、H5 均可稳定触发(H5 需配 user-select: text)。如果你的目标是「让用户明确想复制」,优先用长按——它不依赖时间阈值,不和 tap 冲突,权限模型也更清晰。双击更适合已有桌面端习惯的 H5 场景,移动端慎用。


















