应避免使用原生ondblclick做确认逻辑，因其触发条件苛刻；推荐单击进入待确认态再单击确认，或长按松开模拟确认，并需同时支持touchstart和keydown（enter/space）以保障可访问性。
双击事件监听要用 ondblclick，但别直接用它做确认逻辑
浏览器原生 ondblclick 触发条件苛刻：两次点击必须非常接近（位置 + 时间），用户稍有迟疑或移动鼠标就失效，实际体验极差。它适合打开编辑态、放大图片这类“增强操作”，不适合“防误点”的二次确认。
真正靠谱的方案是：单击触发“进入待确认态”，再单击完成动作；或者用长按 + 松开模拟“确认”意图。下面以更可控的双击间隔检测为例：
- 给按钮加
data-click-timestamp记录上次点击时间 - 每次
onclick中判断当前时间与上一次间隔是否 - 若满足，执行确认逻辑，并清空标记；否则只设标记
<button id="danger-btn">删除数据</button>
<script>
const btn = document.getElementById('danger-btn');
let lastClick = 0;
btn.onclick = function() {
const now = Date.now();
if (now - lastClick < 300) {
if (confirm('确定要删除？此操作不可撤销')) {
// 执行真实删除
console.log('已删除');
}
lastClick = 0; // 重置
} else {
lastClick = now;
alert('再点一次确认');
}
};
</script>
用 setTimeout 防止误判，避免“卡顿后连点生效”
上面代码有个坑：如果用户第一次点击后卡顿 >300ms，再快速双击，第二次会立刻触发确认——因为 lastClick 还在，而间隔又刚好达标。这不是双击，是延迟响应后的误判。
正确做法是加一个清理定时器，在首次点击后 400ms 自动重置状态：
- 每次单击先
clearTimeout上次计时器 - 再
setTimeout设置新计时器，400ms 后把lastClick设为 0 - 这样只要两次点击间隔超过 400ms，就必然重置，不会累积
let lastClick = 0;
let clickTimer = null;
btn.onclick = function() {
clearTimeout(clickTimer);
const now = Date.now();
if (now - lastClick { lastClick = 0; }, 400);
}
};
移动端要考虑 touch 事件，click 延迟高且不准
在 iOS/Android 上，click 有约 300ms 延迟，且 touch 区域判定比鼠标松散，直接套用桌面逻辑容易失灵。必须改用 touchstart：
- 监听
touchstart替代click，避免延迟 - 用
event.touches[0].clientX/Y判断两次触摸是否在同一个大致区域（比如 ±20px） - 仅靠时间不够，位置漂移也会导致误触发
- 记得
event.preventDefault()防止滚屏干扰
let lastTouch = { time: 0, x: 0, y: 0 };
btn.addEventListener('touchstart', function(e) {
e.preventDefault();
const touch = e.touches[0];
const now = Date.now();
const dx = Math.abs(touch.clientX - lastTouch.x);
const dy = Math.abs(touch.clientY - lastTouch.y);
if (now - lastTouch.time <h3>别忽略键盘可访问性，<code>Enter</code> 和 <code>Space</code> 也要支持</h3><p>只处理鼠标或触摸，会让键盘用户（尤其是屏幕阅读器使用者）完全无法触发二次确认。按钮必须响应 <code>keydown</code> 中的 <code>Enter</code>（13）和 <code>Space</code>（32）键：</p>
- 监听
keydown，过滤出这两个键码 - 逻辑复用同一套时间+位置（键盘无位置，只看时间间隔）
- 注意：
Space默认会触发click，所以要在keydown里preventDefault，再手动模拟点击流程
真正的难点不在写两行代码，而在于让所有输入方式（鼠标、触摸、键盘、辅助技术）下的“确认节奏”一致且可预期。很多项目只测了鼠标双击，上线后才发现残障用户根本走不通流程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
