必须用 disabled 属性禁用“加入购物车”按钮，点击即设 button.disabled = true 并添加 aria-busy="true"，请求完成后恢复并提示具体错误；表单内 submit 按钮禁用后天然阻止提交；动态启用需监听 input 事件并初始校验。
禁用加入购物车按钮，必须用 disabled 属性，而不是仅靠 CSS 或 pointer-events: none —— 否则键盘用户仍可聚焦、表单可能误提交、屏幕阅读器完全无法感知状态。
点击后立刻禁用，防止重复提交
用户点一次“加入购物车”，网络请求还没返回时，按钮必须立刻变为不可交互状态。光加 loading 类或改颜色远远不够。
- 点击事件里第一行就写
button.disabled = true，别等 AJAX 发起后再设 - 请求完成（
then或catch）后，统一恢复：button.disabled = false - 同时设置
button.setAttribute('aria-busy', 'true')和button.removeAttribute('aria-busy')，辅助技术才真正知道当前不可操作 - 失败后不要锁死按钮——要恢复启用，并显示具体提示，比如 “库存不足” 而非 “请求失败”
表单内按钮禁用逻辑和 submit 事件的关系
如果加入购物车是用 <form></form> 包裹的（例如带数量输入框），type="submit" 按钮被禁用后，点击不会触发任何 click 事件，也不会提交表单 —— 这是浏览器原生行为，不用额外拦截。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 但要注意：若在
<form></form>上用了事件委托监听click，被禁用的按钮仍会冒泡，需手动判断if (e.target.disabled) return - 回车提交、移动端键盘“完成”键生效的前提，是按钮为
type="submit"且在<form></form>内；仅用type="button"会丢失这些能力 - 真不需要表单语义时，直接用
<button type="button" data-product-id="1057"></button>更轻量，禁用逻辑更干净
动态启用/禁用依赖输入内容？别只监听 keyup
常见错误是监听 onkeyup 来判断是否启用“加入购物车”按钮（比如配合数量输入框），结果粘贴、自动填充、语音输入后按钮仍是灰色。
立即学习“前端免费学习笔记（深入）”；
- 必须用
input事件：它覆盖所有值变更方式（包括粘贴、撤销、密码管理器填充） - 初始状态校验不能漏：DOM 加载完立即执行一次判断，否则预填的数量不会触发启用逻辑
- 推荐写法：
quantityInput.addEventListener('input', () => { addToCartBtn.disabled = +quantityInput.value - 动态插入的按钮（如商品列表异步加载后生成），要在节点挂载后获取元素，避免
document.getElementById(...)返回null
最易被忽略的一点：禁用状态的视觉样式常被 UI 框架重置掉。即使 disabled 属性已生效，按钮看起来仍像可点——必须显式写 button:disabled CSS 规则，且确保它没被更高优先级样式覆盖。
