最快但不推荐直接在HTML中写onclick="addToCart(123)"，因导致结构与逻辑耦合、ID硬编码易错、维护困难；应改用data-product-id存数据，addEventListener批量绑定，并防重复提交、同步按钮状态。
给按钮加 onclick 最快但不推荐
直接在 HTML 里写 onclick="addToCart(123)" 能立刻响应，但会把逻辑和结构混在一起，后续改商品 ID 或加埋点就容易漏、难维护。尤其当页面有多个商品时，硬编码 ID 容易错位，调试时也看不到事件绑定关系。
实操建议：
- 保留按钮的
data-product-id属性，比如：<button class="add-to-cart" data-product-id="456">加入购物车</button> - JS 里用
document.querySelectorAll('.add-to-cart')批量绑定，避免逐个写onclick - 别在 HTML 里调用函数，只存数据，让 JS 统一处理
用 addEventListener 绑定更可控
这是现代写法的标准路径：选中元素 → 监听点击 → 触发函数。好处是解耦、可复用、支持事件委托（比如列表滚动加载后新增的按钮也能自动响应）。
常见错误现象：绑定后点击没反应 —— 大概率是 JS 执行时 DOM 还没加载完，querySelector 返回 null。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 确保脚本放在
</body>前，或用DOMContentLoaded包裹 - 简单写法示例：
document.querySelectorAll('.add-to-cart').forEach(btn => { btn.addEventListener('click', function() { const pid = this.dataset.productId; addToCart(pid); }); }); - 如果按钮是动态插入的（如搜索结果），改用事件委托：
document.addEventListener('click', e => { if (e.target.matches('.add-to-cart')) { ... } })
addToCart 函数里要防重复提交
用户手快连点两次，可能发两遍请求，导致库存扣多、订单重复。这不是 UI 问题，是业务逻辑漏洞。
实操建议：
- 点击后立刻禁用按钮：
this.disabled = true，成功/失败后再恢复 - 加 loading 状态提示，比如修改按钮文字为
"添加中..." - 服务端也要做幂等校验（如用
order_id或request_id去重），前端限制只是第一道防线 - 别只靠
setTimeout恢复按钮，得等接口返回结果再操作，否则网络慢时用户会误以为失败又点一次
移动端点击有 300ms 延迟？加 touchstart 吗
老式 iOS Safari 确实有延迟，但现在主流浏览器（包括微信内置浏览器）基本已默认关闭。强行加 touchstart 可能引发双触发（touch + click 都执行），反而出 bug。
实操建议：
- 优先用
click，兼容性好、语义清晰、无障碍友好 - 真遇到延迟问题，先确认是否启用了
viewport：<meta name="viewport" content="width=device-width, initial-scale=1"> - 不要同时监听
click和touchstart，除非你做了精确的事件去重逻辑
