最可控方式是用 JavaScript 切换 CSS 类而非内联样式，需同步更新 dataset 状态、禁用按钮防重复点击、处理请求失败回滚，并补充移动端 :active 兼容方案。
点击后按钮颜色变化的 CSS 类切换
直接用 JavaScript 切换 class 是最可控、最易维护的方式。不要依赖内联样式或重复写 style 属性，否则后续改颜色、加动画、响应状态都会变麻烦。
常见错误是只改 backgroundColor，但没同步处理文字颜色、边框、光标等，导致视觉割裂；或者用 setAttribute('style', ...) 覆盖了原有样式，丢失了 hover 或 focus 状态。
- 先在 CSS 中定义两个状态类：
.btn-add（默认）和.btn-added（已点击） - JavaScript 里用
element.classList.toggle('btn-added')或.add()，避免重复添加 - 如果要支持“再次点击取消加入”，用
toggle；如果只是单向确认（比如“已加入”不可逆），用add
.btn-add {
background-color: #4CAF50;
color: white;
border: none;
padding: 8px 16px;
}
.btn-added {
background-color: #2196F3;
color: white;
}
.btn-added:active {
transform: scale(0.98);
}
用 dataset 标记按钮当前状态更可靠
光靠 class 名判断是否已加入容易出错——比如用户手动删了 class，或服务端渲染时状态不一致。用 dataset 存状态，JS 读取和更新都更明确。
典型场景：商品页多个“加入购物车”按钮共存，每个都要独立记忆状态；或者页面从 SSR 渲染，初始状态需和服务端一致。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 初始化时设置
data-added="false"，点击后改为"true" - 点击逻辑里先读
btn.dataset.added === 'true'再决定行为，比查 class 更直白 - 配合 class 切换：状态变更 → 更新
dataset→ 更新class→ 触发 UI 变化
防止重复点击导致状态错乱
网络请求未返回前就允许连续点击，可能造成按钮颜色反复跳、购物车数量对不上。这不是视觉问题，是状态同步问题。
真实项目中，“加入购物车”往往伴随 API 调用，必须把 UI 状态和请求生命周期绑定。
- 点击后立即设
btn.disabled = true并加 loading 类，同时更新dataset.added和 class - 请求成功后再设
btn.disabled = false；失败则还原状态或提示错误 - 别只靠颜色变化表示成功——用户可能没注意，或颜色对比度不够，建议加文字提示如“已加入”
移动端点击反馈延迟与 active 状态失效
在 iOS Safari 或部分安卓浏览器里，:active 伪类经常不触发，导致点击瞬间无颜色变化，用户以为没点上。
这不是代码写错了，是浏览器为了滚动优化默认禁用了 active 状态，除非元素有 cursor: pointer 或绑定了 touchstart 事件。
- 给按钮加
style="cursor: pointer"（CSS 里写也行），简单有效 - 或者在 JS 里监听
touchstart，临时加个is-pressingclass，松开再移除 - 注意：不要只依赖
:active实现主状态变化，它只是瞬时反馈；主状态必须由 JS 控制 class 或 dataset
