HTML按钮必须设data-product-id和type="button"，否则JS无法获取商品ID且可能意外提交表单；需用createElement防XSS，事件委托管理动态元素，禁用状态与无障碍属性同步更新。
HTML 本身不能“添加购物车”——按钮只是个触发器，真正逻辑必须靠 JavaScript 驱动，且必须带 data-product-id 才能被 JS 正确识别商品。
按钮必须带 data-product-id 属性，否则 JS 拿不到商品 ID
很多页面写了个 <button>加入购物车</button> 就以为完事了，结果点击毫无反应。JS 代码里通常靠 event.target.dataset.productId 取 ID，如果 HTML 没这个属性，取出来就是 undefined，后续所有逻辑都断掉。
- 正确写法：
<button type="button" data-product-id="1057">加入购物车</button> - 若商品有 SKU（如颜色/尺寸），建议额外加
data-sku-id="2089"，避免主商品 ID 冲突 - 别用
id="product-1057"或class="item-1057"替代——语义不清，CSS 类名可能批量复用，id在页面中必须唯一，但一个商品可能在多个位置展示（列表页、详情页、推荐位） - 服务端渲染时，确保
data-product-id的值和后端/cart/add接口要求的product_id字段类型一致（字符串 or 数字），不一致会导致 400 错误
type="button" 不是可选项，是防止表单意外提交的底线
按钮如果没声明 type，浏览器默认为 submit。一旦它被无意中包在 <form> 里（比如整个商品卡片套了 form），点一下就刷新页面，AJAX 请求根本发不出去。
- 错误：
<form><button>加入购物车</button></form>→ 点击即提交 - 安全写法：
<button type="button" data-product-id="1057">加入购物车</button>，哪怕外面没 form 也显式声明 - 如果真要用 form（比如带数量输入框），那就必须配
event.preventDefault()，但纯按钮 + JS 更轻量、更可控
移动端点击区域至少 44×44px，且禁用状态要靠 JS 控制
小按钮在 iPhone 上点不中，不是用户手抖，是 WCAG 合规硬性要求。光加 padding 不够，inline-block 元素间的换行符会产生空白间隙，实际尺寸缩水。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
display: block或flex布局，配合min-width: 44px; min-height: 44px; - 点击后立刻执行
button.disabled = true，防止连点；同时设button.setAttribute('aria-busy', 'true')告知屏幕阅读器 - 请求完成（无论成功失败）都要恢复
button.disabled = false，不要只删 loading 类——DOM 属性比 class 更可靠 - 失败时建议显示简短业务提示（如 “库存不足”），而不是 “网络错误”，用户不需要知道是前端还是后端问题
别拼 innerHTML 渲染购物车项，用 document.createElement + 事件委托
很多人在 JS 里写 cartEl.innerHTML += '<li data-id="..."' + ...，结果遇到商品名含单引号（如 O'Reilly）直接破坏 DOM，或者后端返回未转义内容触发 XSS。
- 正确方式：用
document.createElement('li')创建元素，用textContent设置文本内容（自动防 XSS） - 数量按钮的点击事件不要每个都
addEventListener，统一委托给父容器#cart-list，监听click后判断event.target.dataset.action === 'increase' - 总价计算不要塞在每条商品项里重复渲染，单独用一个
<span id="total-price"></span>，每次变更后只更新这一个节点
最常被忽略的是：按钮状态变更和事件委托这两步，往往被当成“锦上添花”，实际却是购物车能否稳定运行的分水岭。没做禁用控制，用户狂点三次，后端收到三条重复请求；没用事件委托，动态添加的商品按钮完全无响应——这些都不是样式问题，是功能断裂。
