双击事件本身不能防抖，因dblclick与click是两个独立事件，防抖仅适用于高频单次触发的click事件；正确做法是对click绑定防抖函数，且按钮需设type="button"，移动端无dblclick支持。
双击事件本身不能防抖，dblclick 和 click 是两个独立事件
直接监听 dblclick 并对其做防抖没有意义——防抖是为“高频单次触发”设计的，而双击天然就是两次离散的 click + 一次 dblclick。浏览器按固定顺序触发：mousedown → click → mouseup → mousedown → click → mouseup → dblclick。你无法靠防抖把两次 click “合并”成一次，更不能靠它阻止 dblclick 触发。
常见错误现象：
- 写了
btn.addEventListener('dblclick', debounce(handler, 300))，但双击时 handler 还是只执行一次——这不是防抖生效，是 dblclick 本来就只触发一次 - 同时监听
click和dblclick，又没处理好时序，导致单击逻辑被跳过或重复执行
真正要防的是“快速连续点击”，不是“双击”
用户想防的其实是：手快连点两下按钮，结果发了两次请求、提交了两次表单。这本质是 click 事件过于密集，跟是否构成系统级“双击”无关。
正确做法是给 click 绑定防抖，而不是动 dblclick：
- 用
debounce()包裹实际处理函数，延迟执行（推荐 300–500ms） - 确保防抖函数实例是复用的，不是每次绑定都新建：
const debounced = debounce(handler, 400); btn.addEventListener('click', debounced) - 按钮必须显式声明
type="button"，否则在表单中会默认 submit，防抖还没跑完页面就刷新了
示例关键代码：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
function debounce(fn, delay) {
let timer = null;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
const handleClick = () => fetch('/api/submit', { method: 'POST' });
const debouncedClick = debounce(handleClick, 400);
document.querySelector('button').addEventListener('click', debouncedClick);
移动端根本没 dblclick，别白费力气
iOS 和 Android WebView 默认不触发 dblclick 事件——双击手势被系统拿去缩放页面了。哪怕你写了 ondblclick 或监听 dblclick，99% 的情况都不会进回调。
如果真需要“类似双击”的交互：
- 自己基于
touchstart实现：记录时间戳和坐标，两次间隔 - 但极易和系统手势冲突，也容易误触；更稳妥的做法是改用长按（
touchstart+setTimeout）或加一个“确认”按钮 - 别试图给移动端的
dblclick做防抖——它压根不会来
防抖 + disabled 才算闭环
纯防抖解决不了视觉反馈问题：用户点了没反应，大概率会再点一次，尤其在网络慢时。防抖只是推迟执行，不阻止用户再次点击。
必须配合状态控制：
- 点击瞬间设
btn.disabled = true，按钮变灰不可点 - 请求完成（无论成功失败）后，再设
btn.disabled = false - 如果用了防抖，
disabled应该在防抖计时开始时就设上，而不是等函数真正执行时才设——否则防抖窗口期内用户还能连点
这个组合才是生产环境里真正防住重复提交的最小可行方案。防抖管逻辑频次，disabled 管用户行为，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
