最轻量实现是onclick绑定confirm()，但存在移动端体验差、连续调用可能降级、无防重复提交等问题；推荐addEventListener分离逻辑并配合按钮禁用与服务端幂等校验。
点击按钮触发原生 confirm 弹窗
直接用 onclick 绑定 confirm() 是最轻量的实现方式，适合快速验证逻辑或内部工具。用户点击后弹出浏览器原生确认框，返回布尔值决定是否继续执行。
- 如果用户点「确定」，
confirm()返回true，可接着提交表单或调用添加逻辑 - 如果点「取消」或关闭弹窗，返回
false，通常用return false阻止默认行为 - 注意：现代 Chrome/Firefox 对连续多次调用
confirm()可能静默降级（尤其在非用户手势上下文中），确保它绑定在真实的click事件上
<button onclick="if (!confirm('确定加入购物车？')) return false; addToCart(123);">加入购物车</button>
用 addEventListener 分离逻辑更可控
把事件监听和业务逻辑拆开，避免内联脚本，也方便后续加 loading 状态、防重复点击等处理。
-
event.preventDefault()不是必须的——只有按钮在<form>内且类型为submit时才需阻止默认提交 - 推荐用
data-product-id这类自定义属性存商品 ID，比硬编码到字符串里更易维护 - 别在
confirm()后直接写复杂异步操作（比如 fetch），否则用户点了「确定」但网络失败，体验断层；应先弹窗，再根据结果发起请求
<button class="add-to-cart" data-product-id="456">加入购物车</button>
document.querySelector('.add-to-cart').addEventListener('click', function() {
if (confirm('库存仅剩2件，确定加入购物车？')) {
addToCart(this.dataset.productId);
}
});
confirm 在移动端体验差，得换方案
原生 confirm() 在 iOS Safari 和部分安卓 WebView 中样式不可控、文字不能换行、无法修改按钮文案，且会阻塞页面渲染线程——用户点完「确定」后可能卡顿半秒。
- 真要自定义样式或支持富文本，得用
modal+dialog元素（注意<dialog>的 polyfill 兼容性） - 简单过渡方案：用
alert()替代（仅提示，无取消分支），或改用带 Promise 的轻量库如vanilla-confirmation - 如果项目已用 Vue/React，优先用组件化弹窗（如 Element Plus 的
ElMessageBox或 MUI 的Dialog），避免混用原生 API
addToCart 函数里没做防抖，容易重复提交
用户手快连点两次，confirm() 弹出一次，但若没锁住按钮或清空事件监听，仍可能触发多次请求——后端收到两条相同商品添加指令，库存扣减出错。
立即学习“前端免费学习笔记（深入）”；
- 最简做法：点击后立即将按钮
disabled = true，请求完成后恢复 - 进阶做法：用
AbortController控制 fetch 超时与中断，避免用户切页后请求还在后台跑 - 服务端也得有幂等校验（比如用
request_id去重），不能只靠前端拦
确认框只是第一道交互反馈，不是事务边界。真正稳的购物车，得前后端一起设防。
