按钮点击后应立即禁用并提供视觉反馈，防止重复提交；须在事件回调开头设 disabled，用 finally 恢复状态；移动端建议用 touchstart 替代 click；多按钮场景需配合全局节流控制。
按钮点击后立即禁用，防止重复提交
用户狂点“加入购物车”按钮，后端可能收到 5 次相同请求，导致库存扣减错误或订单重复。最直接有效的办法是：点击瞬间就把按钮设为 disabled，同时配合视觉反馈（比如变灰、加 loading 文字）。
关键不是等接口返回再禁用——那中间仍有空档。必须在 touchstart 或 click 回调开头就执行：
const btn = document.querySelector('.add-to-cart');
btn.addEventListener('click', function() {
if (this.disabled) return;
this.disabled = true;
this.textContent = '添加中...';
<p>fetch('/api/cart/add', { /<em> ... </em>/ })
.then(() => {
// 成功逻辑
})
.catch(() => {
// 错误处理
})
.finally(() => {
this.disabled = false;
this.textContent = '加入购物车';
});
});- 务必用
finally恢复状态，否则网络失败或 JS 报错会导致按钮永久禁用 - 别只靠 CSS 的
:disabled样式，要同步改textContent或徽标文案，否则用户看不到反馈 - 移动端注意：iOS Safari 对
click有 300ms 延迟，建议用touchstart替代（但需防误触，可加preventDefault()+ 短暂节流）
防抖 + 时间窗口控制，拦截高频点击
单纯禁用按钮能防连击，但无法阻止用户在不同商品卡片间快速切换点击。如果页面有多个 .add-to-cart 按钮，需要全局节流策略。
例如限制用户每 1.5 秒最多触发一次加购行为（无论点哪个按钮）：
立即学习“前端免费学习笔记（深入）”；
let lastClickTime = 0;
function canAddToCart() {
const now = Date.now();
if (now - lastClickTime < 1500) return false;
lastClickTime = now;
return true;
}
<p>document.querySelectorAll('.add-to-cart').forEach(btn => {
btn.addEventListener('click', function(e) {
if (!canAddToCart()) {
e.preventDefault();
this.textContent = '稍等…';
setTimeout(() => this.textContent = '加入购物车', 1500);
return;
}
// 正常加购逻辑
});
});- 这个时间窗口（如 1500ms）要略大于后端接口平均响应时间，否则用户会误以为“点了没反应”
- 不推荐用
setTimeout延迟按钮启用——它和用户真实操作节奏脱节，体验割裂 - 若使用 FastButton 类方案，节流逻辑必须放在 touchend 后，且要兼容
click和touchend双路径
服务端也要做幂等校验，不能只信前端
前端限制只是用户体验层防护，恶意用户绕过 JS 或重放请求时，后端照样可能被刷。所以每个 /api/cart/add 请求必须带唯一标识（如 requestId 或用户+商品+时间戳组合），并在数据库层面做幂等判断。
- 常见做法：插入前查是否存在相同
userId+productId的未完成记录；或用 Redis 记录最近 N 秒内该用户的加购 key - 返回 409 Conflict 或
{ success: false, reason: "重复请求" }，前端据此提示用户而非报错 - 别依赖客户端传的
timestamp做判断——它可被篡改；服务端要用System.currentTimeMillis()或数据库NOW()
为什么不用 pointer-events: none？
有人想用 CSS 直接禁用交互：button.style.pointerEvents = 'none'。这看似简单，但问题明显：
- 它不改变按钮语义状态，屏幕阅读器仍会把它当作可交互元素播报
- 无法触发
:disabled伪类样式，CSS 控制不统一 - 恢复时得手动重置所有样式，容易遗漏 hover/focus 状态
- 某些安卓 WebView 下
pointer-events: none对touchstart无效
真正要禁用按钮，就老实用 disabled 属性——它原生支持可访问性、样式、表单提交拦截，且所有现代浏览器行为一致。
