vue 3 不支持原生 doubletap 事件，需基于 touchstart/touchend 手动识别双击：记录首次触摸时间与位置，在阈值时间（如300ms）和距离（如20px）内触发，轻量可控且便于测试。
Vue 3 本身不提供原生的 doubletap 事件，因为这是移动端触摸行为，不是标准 DOM 事件（@dblclick 仅对鼠标有效，且在多数触摸设备上不会触发）。要实现可靠的移动端双击，必须基于 touchstart、touchend 手动识别两次快速触碰，并做好防误触、时序控制和平台兼容处理。
用 touch 事件手动识别双击
核心逻辑是记录第一次触摸时间与位置，若第二次触摸在指定时间窗口（如 300ms 内）且距离很近（如
- 监听
touchstart获取首次触摸坐标和时间戳 - 监听
touchend判断是否满足双击条件（时间差 + 位移阈值） - 使用
preventDefault()防止部分浏览器触发缩放或默认行为（可选） - 用
ref或useState管理上一次触摸状态，避免闭包失效
封装成可复用的组合式函数（Composable）
推荐封装为 useDoubleTap Hook，接收目标元素 ref 和回调函数：
- 在
onMounted中绑定touchstart/touchend - 使用
setTimeout清除单次触摸标记，避免跨操作干扰 - 支持配置
thresholdMs（时间窗口）和distancePx（允许偏移） - 返回一个
stop方法用于解绑，便于组件卸载时清理
注意与原生 dblclick 的区别和规避冲突
@dblclick 在 iOS Safari 和部分 Android 浏览器中基本不可用；强行启用可能触发页面缩放。不要混用或 fallback 到它。
- 禁用双击缩放：在
<meta name="viewport">中确保user-scalable=no或至少maximum-scale=1 - 避免同时监听
click和doubletap：否则单击会误触发两次（click + 第一次 tap），建议用节流或状态锁过滤 - PC 端回退方案：可通过
matchMedia('(hover: hover)')检测是否支持悬停，只在触摸设备启用 doubletap 逻辑
简单示例（组合式 API）
在组件中调用：
const elRef = ref()
useDoubleTap(elRef, () => {
console.log('double tapped')
}, { thresholdMs: 300, distancePx: 20 })
模板中：<div ref="elRef">...</div>。该方案不依赖第三方库，轻量、可控，也方便单元测试模拟 touch 事件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
