双击触发两次 click 是浏览器标准行为，因双击判定机制为先发 click 再补 dblclick，无法取消已发出的 click；需用防抖（延迟 250–280ms）拦截单击，双击时清除定时器。
双击按钮触发两次 click 是浏览器标准行为，不是代码写错了——必须用防抖逻辑主动拦截，不能靠删事件或赌用户不双击。
为什么 click 和 dblclick 会同时触发
浏览器判定双击的底层机制是：先发第一次 click，300ms 内再检测到一次 click，才补发 dblclick。它不会取消已发出的第一次 click，更不会阻止第二次 click 发出。所以你看到的是 click ×2 + dblclick，顺序固定、无法绕过。
常见错误是直接给元素同时绑定两个监听器，比如：
el.addEventListener('click', handleSingle);
el.addEventListener('dblclick', handleDouble);
这会导致业务逻辑被重复执行（如单击选中、双击编辑，结果先选中两次再编辑）。
立即学习“前端免费学习笔记（深入）”；
debounce 函数怎么配参数才对
防抖函数本身不区分单双击，关键在调用方式：单击逻辑必须延迟执行，且这个延迟要略小于双击判定阈值（通常取 250–280ms），否则双击时单击回调还没清掉，照样会执行。
-
debounce(fn, 260, true)：首点立即执行（triggleNow = true），但这是错的——首点立刻执行就失去了拦截第二次 click 的机会 -
debounce(fn, 260, false)：正确。所有点击都延迟 260ms 执行，而双击的第二下会在 260ms 内到来，此时 clearTimeout 清掉前一个定时器，只让双击逻辑跑 - 延迟值不能设成 300ms 或更高：浏览器双击阈值是动态的（移动端可能更短），硬卡 300ms 容易误判
实际写法：一个定时器 + 一个标志位就够了
不需要引入完整防抖库，几行代码就能解耦。核心是：单击注册定时器，双击清除它。
let clickTimer = null;
el.addEventListener('click', () => {
clickTimer = setTimeout(() => {
handleSingle(); // 单击逻辑
}, 260);
});
el.addEventListener('dblclick', (e) => {
e.preventDefault(); // 防止部分浏览器默认行为干扰
clearTimeout(clickTimer);
clickTimer = null;
handleDouble(); // 双击逻辑
});
注意点：
- 不要在
dblclick里再调handleSingle——双击时单击逻辑必须彻底取消 -
e.preventDefault()不是必须，但在表单按钮或可拖拽元素上建议加上，避免意外滚动或选中文本 - 如果元素支持触摸（如移动端），
dblclick基本无效，得换用touchstart+ 时间间隔判断
Vue/React 里别直接绑 @click 和 @dblclick
框架模板语法会把两个事件都挂载到合成事件系统里，照样触发两次回调。必须在方法层做隔离：
Vue 示例（Composition API）：
const handleClick = debounce(() => {
// 单击逻辑
}, 260, false);
const handleDblClick = () => {
clearTimeout(clickTimer); // 清掉 debounce 里的 timer
// 双击逻辑
};
React 示例（useCallback + useRef）：
const timerRef = useRef(null);
const handleClick = useCallback(() => {
timerRef.current = setTimeout(() => {
// 单击逻辑
}, 260);
}, []);
const handleDblClick = useCallback(() => {
clearTimeout(timerRef.current);
timerRef.current = null;
// 双击逻辑
}, []);
复杂点在于：如果单击逻辑里有异步请求，而用户双击了，得确保请求能被 cancel（比如用 AbortController），否则请求还在发，只是 UI 逻辑跳过了——这才是真正容易被忽略的坑。
