应使用 addeventlistener('dblclick') 而非 ondblclick 属性，因后者存在 this 指向错误、无法传参、不可移除、框架不兼容及浏览器双击判定差异等问题；正确做法是绑定 'dblclick' 事件并配合节流处理单双击冲突，移动端需用 pointerdown 自行实现双击检测。
直接用 addEventListener('dblclick')，别碰 ondblclick 属性 —— 它不是“检测方法”，而是调试残余。
为什么不能写 ondblclick="handle()"
这个写法看着省事，但实际运行时会暴露一堆隐性问题：
-
this指向window，不是你点的那个元素 - 无法传参（除非拼字符串，比如
ondblclick="handle(123)"，但 ID 硬编码、无作用域、易 XSS） - 没法用
removeEventListener移除，也不能设置{ once: true }或passive: false - 在 React/Vue 里会被框架事件系统忽略或覆盖，根本不会触发
- Firefox 和 Chrome 对双击间隔判定逻辑不同（Firefox 更依赖连续单击节奏，Chrome 偏向系统级 500ms），
ondblclick完全不提供干预入口
addEventListener('dblclick') 的正确用法
这是唯一能稳定控制双击行为的方式，关键点就三个：
- 事件名必须是
'dblclick'，不是'doubleclick'（拼错就静默失败） - 绑定前建议加
user-select: none样式，避免双击文字触发浏览器默认选中干扰 - 如果同时监听
click和dblclick，注意浏览器会先发两次click，再发一次dblclick；想防止单击回调误执行，得用节流逻辑（见下一条）
示例：
element.addEventListener('dblclick', function(e) {
e.preventDefault(); // 必要时阻止默认行为
console.log('双击位置：', e.clientX, e.clientY);
});
怎么同时处理单击和双击不冲突
原生事件机制决定了 click 和 dblclick 天然共存，但业务上往往需要“双击时不触发单击”。靠 CSS 或事件选项搞不定，得靠时间戳节流：
- 记录上一次
click的时间戳 - 在
click回调里启动一个setTimeout（阈值建议 300–400ms，比系统默认 500ms 更灵敏） - 如果期间又来一次
click，就清掉定时器，走双击逻辑；否则执行单击逻辑 - 不要依赖
event.detail判断次数 —— 它在移动端无效，且 Firefox 下行为不稳定
简版实现：
let lastClick = 0;
element.addEventListener('click', function(e) {
const now = Date.now();
if (now - lastClick {
if (lastClick !== 0) handleClick(e);
}, 350);
lastClick = now;
}
});
移动端根本没有 dblclick 事件
所有触摸设备（iOS/Android）的浏览器都不触发原生 dblclick。你看到的“双击缩放”是浏览器私有行为，不暴露给 JS。
- 必须自己基于
touchstart/touchend或pointerdown/pointerup实现双击检测 - 不能只看时间间隔，还要过滤掉
touchmove（防止误判为滑动） - 推荐用
pointer事件替代touch：更统一、自动去重、支持鼠标/触控笔/触摸混用 - jQuery 插件如
doubleTap底层也是这么干的，但现代项目应避免引入 jQuery 仅为此功能
真正跨端可用的最小闭环：
let lastPointerDown = 0;
element.addEventListener('pointerdown', function(e) {
const now = Date.now();
if (now - lastPointerDown <p>最常被跳过的细节：双击判定阈值不是固定值，它得适配设备输入延迟和用户操作习惯；300–400ms 是桌面端较稳的起点，但首次上线前务必在真机上实测三次以上。</p>前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
