ondblclick 属性可直接使用但受限于系统双击阈值、元素交互状态及移动端兼容性，推荐用时间戳节流手动实现双击逻辑，React 中应封装自定义 Hook 而非依赖 onDoubleClick。
ondblclick 属性能直接用，但要注意触发条件
HTML 原生 ondblclick 确实可以绑定双击行为，但它依赖系统级双击时间阈值（通常 200–500ms），且只对可聚焦/可交互元素稳定生效。按钮默认支持，但若按钮被 CSS 禁用了 pointer-events 或设置了 user-select: none，双击可能完全不触发。
常见错误现象：ondblclick 绑定后毫无反应，或单击事件和双击事件同时触发（比如先执行 onclick，再执行 ondblclick）。
- 确保按钮没被
pointer-events: none或disabled阻断（disabled元素不会触发任何鼠标事件） - 避免在同一个元素上同时写
onclick和ondblclick—— 浏览器会先发两次click，再发一次dblclick，容易逻辑冲突 - 移动端没有双击事件，
ondblclick在 iOS/Android 上基本无效（Safari 仅部分场景模拟，不可靠）
用 JavaScript 手动实现更可控的双击逻辑
绕过原生限制、兼容移动端、避免 click/dblclick 冲突，推荐用 addEventListener + 时间戳节流判断：
let lastClickTime = 0;
const button = document.getElementById('my-btn');
<p>button.addEventListener('click', (e) => {
const now = Date.now();
if (now - lastClickTime < 300) {
// 视为双击
console.log('double clicked');
lastClickTime = 0; // 重置
} else {
lastClickTime = now;
// 单击逻辑放这里（可选）
}
});关键点：
立即学习“前端免费学习笔记（深入）”；
- 阈值设为
300毫秒比系统默认更稳妥，兼顾不同设备反应速度 - 不要用
setTimeout延迟判断 —— 容易导致内存泄漏或状态错乱 - 如果需要区分单/双击，单击逻辑必须放在「非双击分支」里，且建议加防抖（否则快速连点会误触发多次单击）
React 中处理双击不能只靠 onDoubleClick
React 的 onDoubleClick 本质还是映射到原生 ondblclick，所以同样受制于浏览器兼容性和移动端缺失问题。更现实的做法是封装自定义 Hook：
function useDoublePress(callback, delay = 300) {
const [lastPress, setLastPress] = useState(0);
<p>return useCallback((e) => {
const now = Date.now();
if (now - lastPress < delay) {
callback(e);
setLastPress(0);
} else {
setLastPress(now);
}
}, [callback, delay, lastPress]);
}然后在组件中使用：
const handleDblPress = useDoublePress(() => alert('Double pressed!'));
<p>return <button onClick={handleDblPress}>Click me</button>;注意：
- 别把
useDoublePress直接传给onDoubleClick—— 这样既没解决移动端问题，又浪费了 Hook 封装价值 - 如果按钮还带异步操作（如提交表单），双击时要加
disabled或 loading 状态，否则可能重复提交
为什么不用第三方库？
像 lodash.debounce 或 use-debounce 这类工具不适合双击检测 —— 它们是为「防抖」设计的，目标是抑制高频触发；而双击检测是「识别特定间隔内的两次触发」，逻辑相反。硬套 debounce 会导致第二次点击被丢弃，根本收不到双击信号。
真正容易被忽略的点：双击判定不是“两次点击”，而是“两次点击之间的时间差落在容忍窗口内”。这个窗口一旦设得太宽（比如 800ms），用户会感觉响应迟钝；设得太窄（100ms），手速稍慢就失效。300ms 是多数场景下平衡准确率和体验的临界值，但具体项目仍需结合真实用户测试调整。
