原生 ondblclick 在桌面端可用但在移动端无效，因 iOS/Android WebView 不派发 dblclick 事件；应通过时间差检测（click + 定时器）实现跨端双击逻辑，并避免在框架中直接使用 @dblclick 或 onDoubleClick。
ondblclick 在桌面端能用，但别在移动端写它
原生 ondblclick 属性确实存在，<button ondblclick="doSomething()"> 这种写法在 Chrome/Firefox/Edge 桌面版里能正常触发。但它依赖鼠标双击的底层识别逻辑，而 iOS 和 Android 的 WebView 根本不把连续两次 touchstart 映射为 dblclick——不是你漏写了事件，是系统压根没派发这个事件。
常见错误现象：手机上反复双击按钮，控制台安静如鸡，也没报错，开发者常误以为 JS 没挂载成功。其实只是事件根本没生成。
- 桌面端可用，但需满足“同一位置 + 300ms 内两次点击”，稍有偏移或延迟就降级为两次
click - 移动端必须放弃原生方案，
ondblclick或addEventListener('dblclick', ...)都无效 - 别指望 polyfill 补救，这不是 API 缺失，是事件模型差异
用时间差检测实现全平台双击逻辑
核心思路很简单：监听 click，记录上次点击时间戳，当前点击减去上次时间，差值小于阈值（比如 300ms）就算双击。比等原生事件更可控，也真正跨端。
但直接用 lastClickTime 变量容易出问题——比如用户第一次点击后卡顿 500ms，再快速连点两下，第二下就会误判为双击。得加定时器兜底。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 每次
click触发时先clearTimeout上次计时器 - 再
setTimeout设置新计时器，400ms 后重置lastClickTime = 0 - 判断间隔用
Date.now() - lastClickTime < 300，满足则执行双击逻辑并清空状态 - 避免在
click回调里做耗时操作（如发请求），否则会拖慢双击判定
let lastClickTime = 0;
let clickTimer = null;
<p>button.addEventListener('click', (e) => {
const now = Date.now();</p><p>if (now - lastClickTime < 300) {
handleDblClick(e);
lastClickTime = 0;
clearTimeout(clickTimer);
} else {
lastClickTime = now;
clickTimer = setTimeout(() => {
lastClickTime = 0;
}, 400);
}
});Vue/React 里别硬套 @dblclick 或 onDoubleClick
@dblclick（Vue）和 onDoubleClick（React）本质都是绑定原生 dblclick 事件，所以同样在移动端失效。框架封装不等于兼容性补全。
更稳妥的做法是封装可复用的逻辑单元：
- Vue：写一个
v-dblclick自定义指令，内部用上述时间差检测，传入回调函数即可 - React：抽一个
useDblClickHook，接收ref和回调，避免每个组件重复写判断逻辑 - 别在同一个元素上同时写
@click和@dblclick—— 双击时@click仍会触发两次，需手动加防抖或状态标记
双击确认类交互，优先考虑替代方案
双击本身对触摸设备不友好，用户也没有“双击确认”的肌肉记忆。浏览器缩放、系统手势、手指定位偏差都会干扰识别。真要防误操作，单击进入待确认态 + 再次单击确认，或者长按松开，体验更稳定。
如果非要用双击做确认，注意两点：
- 别用原生
ondblclick做删除/提交等关键操作，触发条件太苛刻，用户失败率高 - 视觉反馈必须明确：第一次点击后给个提示（如文字变“再点一次确认”），否则用户不知道自己处在什么状态
- 键盘支持不能丢：要监听
keydown事件，支持 Enter/Space 键触发相同逻辑，保障可访问性
双击逻辑看似简单，但时间阈值、定时器清理、移动端坐标容差、键盘 fallback 这些细节一漏，就变成半残功能。尤其在混合设备场景下，别省那几行代码。
