按钮必须带 data-product-id 属性以确保购物车逻辑准确识别商品，type="button" 防止表单误提交，点击后需同步设置 disabled 和 aria-busy 状态，移动端触控区不小于 44×44px。
按钮必须带 data-product-id 属性才能被 JS 识别
购物车逻辑依赖前端能准确提取商品唯一标识，data-product-id 是最稳妥的传递方式。别用 id 或 name 混淆语义，也别把 ID 拼在 URL 里（比如 href="add-to-cart?id=123"），那会让按钮变成跳转链接，破坏单页体验。
常见错误：用 class="btn-add" 却没提供任何可读取的商品信息，导致 JS 只能靠 DOM 位置推断 ID，一改结构就失效。
- 正确写法：
<button type="button" data-product-id="1057">加入购物车</button> - 如果商品有 SKU 变体（如颜色/尺寸），建议同时加
data-sku-id，避免只靠主商品 ID 无法区分库存单位 - 服务端渲染时，确保
data-product-id的值与后端接口中/cart/add所需的product_id字段一致，类型也要匹配（字符串 or 数字）
type="button" 是防止表单意外提交的关键
很多页面把按钮放在 <form> 里却不设 type，结果点击直接触发表单 submit，页面刷新或跳转，购物车请求根本没发出去。
即使没套 form，也建议显式声明 type="button"——浏览器默认是 submit，不是你想象的“无行为”。
立即学习“前端免费学习笔记（深入）”；
- 错误：
<button>加入购物车</button>（在 form 内 = 提交） - 安全写法：
<button type="button" data-product-id="1057">加入购物车</button> - 若真要用表单（比如带数量输入框），则
<button type="submit">配合event.preventDefault()和 AJAX，但没必要增加复杂度
禁用状态和加载反馈不能只靠 CSS 类名切换
用户连点两次、网络慢、接口重复调用——这些都得靠 JS 控制按钮状态。光靠 disabled 属性或 .loading 类还不够，容易出现状态不一致。
真正要做的：点击后立刻 button.disabled = true，请求完成（无论成功失败）再恢复；同时用 aria-busy="true" 告诉屏幕阅读器当前不可交互。
- 别只写
btn.classList.add('loading')就完事，漏掉disabled会导致用户仍可点击 - 恢复时优先用
button.disabled = false，而不是删 class——DOM 状态比样式更可靠 - 失败后建议保留按钮启用状态，并显示简短提示（如 “库存不足”，而非 “请求失败”）
移动端点击区域至少 44×44px，且避免 inline-block 间隙
小按钮在 iPhone 上难点击，不是体验问题，是合规风险（WCAG 要求最小触控区）。别信“加个 padding 就行”，inline-block 元素间的换行符会产生空白间隙，导致实际宽度缩水。
最省心解法：用 display: block 或 flex 布局按钮，再设 min-width 和 min-height。
- 危险写法：
<button style="display:inline-block;padding:8px">…</button>（实际触控区可能不到 30px） - 推荐：
<button style="display:block;min-width:44px;min-height:44px;padding:12px">…</button> - 如果按钮在 flex 容器里，记得加
align-items: center防止文字垂直偏移
