按钮须绑定到每个商品dom节点并携带唯一标识（如data-id），用事件委托监听；文案、状态需随库存/登录态动态更新；点击后仅禁用当前按钮并加loading态；移动端需保证最小触控尺寸44px。
按钮需要绑定到每个商品 DOM 节点上，不能只写一个 <button></button>
常见错误是只在页面顶部或底部放一个 <button></button>，然后用 JS 统一绑定 click 事件——这样点击时根本不知道用户想买哪个商品。必须让每个按钮都携带对应商品的唯一标识（比如 data-id 或 data-sku）。
实操建议：
- 后端渲染时，为每个商品项生成独立的
<button class="buy-btn" data-id="1024">立即购买</button> - 前端 JS 用事件委托更稳妥：
document.querySelector('.product-list').addEventListener('click', e => { if (e.target.matches('.buy-btn')) { const id = e.target.dataset.id; addToCart(id); } }); - 避免直接遍历所有按钮加事件监听（尤其商品数 >100 时性能明显下降）
按钮文案和状态要随库存/登录态动态更新
静态写死的“立即购买”在库存为 0 或用户未登录时会误导用户。必须在 DOM 渲染后或数据变更时同步修正按钮文本、禁用状态和 class。
实操建议：
- 初始渲染时就带
disabled和data-stock="0"属性，比如：<button data-stock="0" disabled>缺货</button> - 用 CSS 控制不同状态样式：
button[disabled] { opacity: 0.6; cursor: not-allowed; } - 不要靠 JS 动态改
innerHTML来切文案，优先用textContent+ class 切换，减少重排
点击后需防重复提交，但不能简单 disabled 整个按钮组
用户快速连点会导致多次请求，但若把所有按钮统一设为 disabled，用户就无法继续操作其他商品了。
实操建议：
- 只禁用当前被点击的那个按钮：
e.target.disabled = true;，请求完成后再恢复 - 配合 loading 状态 class：
e.target.classList.add('loading');，CSS 控制 spinner 显示 - 网络失败时记得还原：
e.target.disabled = false; e.target.classList.remove('loading'); - 别用
setTimeout模拟防抖——真实接口耗时不可控，应以请求生命周期为准
移动端点击区域太小，<button></button> 必须保证最小触控尺寸
原生 <button></button> 默认 padding 很小，在 iPhone 上容易点不中，引发用户反复点击甚至误购。
实操建议：
- CSS 强制最小尺寸：
button.buy-btn { min-width: 88px; min-height: 44px; padding: 8px 16px; } - 避免用
<div onclick="..."> 替代 button——语义缺失、无键盘支持、iOS Safari 有 300ms 延迟 <li>真机测试时用 Safari 开发者工具的「Toggle device toolbar」模拟手指点击热区</li> 实际批量设置的关键不是“怎么加按钮”，而是每个按钮是否能准确表达商品上下文、响应用户意图、并承受真实交互压力。最容易被忽略的是库存变化后的按钮状态同步——它往往依赖异步接口返回，但 UI 更新滞后半秒，用户就可能点错。</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
