可用加入购物车按钮需满足：①必须含data-product-id且值与后端一致；②type="button"防默认提交；③点击即设disabled和aria-busy，完成后恢复；④触控区≥44×44px；⑤属性须服务端直出。
直接用 就能生成可用的加入购物车按钮——不需要框架、不依赖表单、不拼字符串，只要属性对、类型明、状态可控，JS 就能稳稳接住。
data-product-id 必须存在，且值要和后端一致
这是 JS 识别商品的唯一依据，漏掉或写错就等于按钮“没身份证”。
常见错误是把 ID 拼在 href 或 onclick 字符串里，比如 onclick="addToCart(123)" 或 href="?add=123"，这样既难维护，又容易被 XSS 利用。
正确做法：
-
data-product-id值必须和服务端/cart/add接口要求的product_id字段完全匹配（类型也要一致：数字就传数字，字符串就传字符串） - 如果有 SKU 变体（如颜色/尺寸），额外加
data-sku-id="sku-456"，别指望靠主商品 ID 区分库存 - 别用
id或class存 ID，它们语义上不是用来传业务数据的
type="button" 不是可选项，是防翻车底线
浏览器默认 的 type 是 submit。哪怕按钮不在 里，这个默认行为也始终存在。
后果很直接：点一下页面刷新、跳转、购物车请求根本没发出去。
所以必须显式声明：
- 一律写
type="button"，哪怕你“确定没套 form” - 如果真要用表单（比如带数量输入框），那
配合event.preventDefault()+ AJAX，但没必要自增复杂度 - 别信“我只用 class 控制样式”，DOM 行为优先级永远高于 CSS
点击后立刻禁用 + aria-busy，别只加 loading 类
用户连点、网络延迟、接口重复提交——这些不是边缘情况，而是日常。光靠 btn.classList.add('loading') 完全不够。
真正起作用的是 JS 层的状态控制：
- 点击瞬间执行
button.disabled = true和button.setAttribute('aria-busy', 'true') - 请求完成（无论 success 还是 error）后，必须恢复
button.disabled = false和button.removeAttribute('aria-busy') - 失败时建议保留启用状态，并显示具体提示（如 “库存不足”，而不是 “请求失败”）
- 别用
removeAttribute('disabled')，DOM 状态比属性移除更可靠
移动端触控区不能靠 padding 硬撑
iPhone 上点不中、误触、WCAG 合规警告——这些问题往往出在按钮实际渲染尺寸小于 44×44px。
常见陷阱是用 inline-block 写按钮，HTML 换行符会引入空白间隙，导致 width 计算缩水。
稳妥做法：
- 给按钮设
display: block或display: inline-flex，避开 inline-block 间隙问题 - 用
min-width: 44px; min-height: 44px;，再配合padding往里撑，确保触控区达标 - 别只测桌面 Chrome，真机连 Safari 和 Android Chrome 测一遍
最易被忽略的一点：所有这些属性和状态，必须在服务端渲染时就写进 HTML，而不是等 JS 加载完再动态注入——首屏交互延迟、SSR 不一致、SEO 友好性，全卡在这一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
