纯HTML本身不能加入购物车，按钮必须带data-product-id属性、显式声明type="button"，并由JavaScript绑定行为；否则点击无响应。data-product-id是JS识别商品的唯一依据，需与后端接口字段一致，类型匹配；type="button"防止表单误提交；移动端触控区不小于44×44px；点击时须同步设置disabled和aria-busy状态。
纯 HTML 本身不能“加入购物车”，按钮必须带 data-product-id 属性、显式声明 type="button"，并由 JavaScript 绑定行为——否则点下去什么都不会发生。
按钮必须带 data-product-id 才能被 JS 正确识别
这是整个加购逻辑的起点。没有这个属性，JS 就无法知道用户想加哪个商品。
-
data-product-id值要和服务端接口（如/api/cart/add）要求的product_id字段完全一致，类型也得匹配（比如后端要字符串，你就别传数字） - 别用
id或class模拟商品 ID，结构一变就断；也别塞进href里，比如href="add?id=1057"，那会触发跳转，破坏单页体验 - 如果有 SKU 变体（颜色/尺寸），额外加
data-sku-id，只靠data-product-id无法区分库存单位 - 错误写法：
<button class="btn-add">加入购物车</button>（JS 无从得知商品 ID） - 正确写法：
<button type="button" data-product-id="1057" data-sku-id="sku-203">加入购物车</button>
type="button" 不是可选项，是防表单误提交的底线
浏览器默认 <button></button> 的 type 是 submit，哪怕按钮没包在 <form></form> 里，某些老浏览器或嵌套场景下仍可能触发提交。
- 只要按钮在
<form></form>内且没设type，点击就会提交表单——页面刷新，加购请求根本发不出去 - 即使不用表单，也必须显式写
type="button"，这是最小成本的防御性写法 - 别依赖 CSS 类名（如
.btn-disabled）来禁用交互，它不阻止点击事件；真正可靠的是button.disabled = true - 如果真要用表单（比如带数量输入框），那就用
<button type="submit"></button>+event.preventDefault()+fetch，但没必要自增复杂度
移动端触控区至少 44×44px，且避免 inline-block 间隙
这不是“更好看”的问题，而是 WCAG 合规和实际可用性的硬门槛。iPhone 上点不中，等于功能不可用。
立即学习“前端免费学习笔记（深入）”；
- 别只加
padding就以为够了；如果按钮是display: inline-block，HTML 换行符会产生空白间隙，导致计算宽度缩水 - 推荐统一用
display: block或flex布局，再设min-width: 44px; min-height: 44px; - 确保
data-product-id在服务端渲染时已存在，不要等 JS 运行后再动态写入——首屏可点击性依赖它 - 按钮内文字别用
<span></span>包裹再设样式，容易撑开高度却不增加触控热区；直接对button设line-height和padding
最容易被忽略的一点：按钮状态必须由 JS 主动控制，而不是只靠样式切换。连点两次、网络延迟、接口失败——这些都会让 UI 和真实状态脱节。disabled 属性和 aria-busy="true" 是同步更新的，缺一不可。
