event.detail不可靠，因其依赖系统阈值、受平台差异影响且移动端无效；应手动计时累加点击并设窗口期（如300ms）来稳定识别双击/三击。
原生 JavaScript 的 click 事件本身不提供连击次数（如双击、三击）信息，event.detail 也**不能可靠用于判断双击或三击**——它只表示鼠标主键在该元素上**连续快速点击的次数**，但行为受浏览器、操作系统、鼠标设置影响极大，且仅对 click 有效，对 dblclick 或自定义多击无意义。
为什么 event.detail 不适合做双击/三击判断
event.detail 是 MouseEvent 的只读属性，在 click 事件中：
- 单次点击通常为
1 - 双击时，**先触发一次
detail=1的 click，再触发一次detail=2的 click**（部分浏览器还可能触发dblclick） - 三击时，可能依次触发
detail=1→detail=2→detail=3的 click（但非所有环境都支持，macOS Safari 默认禁用三击选择，Chrome/Firefox 行为也不一致） -
关键问题：它依赖系统级“连续点击时间阈值”和“距离容差”，不可控；无法区分用户是真想三击，还是手抖慢了点；
dblclick事件会干扰click流程；移动端完全不适用。推荐方案：手动计时 + 状态管理（稳定可靠）
自己记录点击时间戳和次数，在指定时间窗口（如 300ms）内累计，超时则重置。适用于所有设备和场景：
let clickStack = []; const MAX_INTERVAL = 300; // 毫秒，连击判定窗口 <p>element.addEventListener('click', (e) => { const now = Date.now();</p><p>// 清理过期点击（超过 MAX_INTERVAL 的旧记录） clickStack = clickStack.filter(t => now - t </p><p>// 加入本次点击时间 clickStack.push(now);</p><p>// 根据栈长度执行逻辑 if (clickStack.length === 2) { console.log('检测到双击'); // 执行双击操作（如打开编辑、缩放） } else if (clickStack.length === 3) { console.log('检测到三击'); // 执行三击操作（如选中整行、复制全文） } }); </p>✅ 优点：完全可控、跨平台、可定制阈值、兼容移动端（配合
touchstart稍作适配）进阶建议：解耦点击类型，避免冲突
若同时需要单击、双击、三击，注意事件顺序和防抖：
- 不要同时监听
click和dblclick——dblclick触发时，前两个click已发出，易误判 - 统一用自定义计时逻辑处理所有连击，单击作为“超时后只剩 1 次”的兜底动作
- 添加防误触：比如三击后清空栈，或要求三次点击位置距离 ≤ 10px（用
e.clientX / e.clientY） - 移动端建议用
touchstart替代click，避免 300ms 延迟干扰计时
补充：如果坚持用 event.detail（仅限简单桌面场景）
仅作了解，不推荐用于生产：
element.addEventListener('click', (e) => { switch(e.detail) { case 1: console.log('单击'); break; case 2: console.log('系统级双击'); break; case 3: console.log('系统级三击（极不可靠）'); break; } });⚠️ 注意：这只能反映浏览器当前对“连续点击”的解释，不是你的业务逻辑所需的“用户意图”。例如用户快速点三下，可能因微小停顿得到
detail=1+detail=2，而得不到detail=3。 - 不要同时监听
