按钮必须使用 而非 ，语义正确、支持键盘操作与无障碍；需明确设置 type="button"（默认为 submit 易误触）；禁用状态必须用 disabled 属性；文案须根据服务端返回的库存、登录态等实时更新；焦点管理、对比度、防重复提交均需严格实现。
按钮必须用 <button></button> 而不是 <a></a>
用户点“立即购买”是触发下单动作，不是跳转页面。用 <a></a> 会导致语义错误、键盘焦点行为异常（比如按回车不触发）、屏幕阅读器误读为导航链接，还可能被浏览器预加载或缓存干扰。
正确做法是：<button type="button">立即购买</button>。如果按钮要提交表单（比如带 sku 选择的隐藏 form），则用 type="submit"；但绝大多数场景下，应保持 type="button"，由 JS 主动调用下单接口，避免意外刷新或重复提交。
- 别写
<button></button>却漏掉type属性——浏览器默认为submit，嵌在 form 里会直接触发表单提交 - 禁用状态必须用
disabled属性，而非仅靠 CSS 灰色样式，否则键盘用户仍可聚焦并按空格/回车触发 - 不要给按钮加
href或onclick="location.href=..."，这是退化成链接的典型信号
按钮文案要动态响应库存与状态
“立即购买”不是静态文案。库存为 0、商品下架、未登录、限购已满时，文案必须实时变化，否则用户点击后才弹 toast，体验断裂。
常见状态对应文案建议：
- 有货可买 →
立即购买 - 缺货 →
缺货中（禁用按钮，不隐藏） - 未登录 →
请先登录（点击触发登录浮层，非跳转登录页） - 限购达成 →
已达购买上限 - 预售中 →
预售中（需同步显示预计发货时间）
关键点：这些状态判断不能只靠前端 JS 模拟，必须和服务端返回的 product.status、stock、buyable 等字段对齐。前端硬编码“库存 > 0 就可买”是常见翻车点——实际可能因地区、会员等级、风控策略被拦截。
无障碍与焦点管理常被忽略
按钮被键盘 tab 到时，必须有清晰视觉焦点；点击后若打开弹窗（如规格选择），焦点要自动移入弹窗首个可交互元素（通常是第一个 <select></select> 或 <button></button>），否则屏幕阅读器用户会卡在原页面。
- 确保按钮有足够对比度（文本与背景色比 ≥ 4.5:1），灰色禁用态也要满足最低可读性
- 添加
aria-label仅当图标无文字时需要，例如纯购物车图标按钮才加aria-label="立即购买"；带文字的<button>立即购买</button>不需额外 aria - 不要用
tabindex="-1"隐藏按钮焦点——它让键盘用户完全无法操作
防重复点击和 loading 状态必须绑定到按钮本身
用户手快连点两次，“立即购买”按钮没反馈，后端却收到两笔订单，这是最典型的资损入口。
正确做法是在 JS 中点击后立刻设置按钮为 disabled 并替换文案：
button.disabled = true; button.textContent = '正在提交...';
而不是仅改 CSS 或加遮罩层。因为遮罩可被绕过，CSS 禁用不影响键盘操作，只有原生 disabled 才能阻断所有输入通道。
- loading 状态结束后，必须恢复
disabled=false和原始文案，不能靠页面刷新重置 - 网络失败时，除了提示错误，还要主动清除
disabled状态，否则按钮永久不可点 - 不要用
setTimeout模拟 loading 时长——真实接口响应快慢不一，固定延时会误导用户
按钮的边界情况比想象中多：支付中断、库存瞬时变化、并发请求、SSR 渲染差异……所有状态都得落在按钮 DOM 属性和文本上，而不是藏在某个看不见的变量里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
