按钮无反应需先检查是否误用preventDefault()；应保留默认行为或手动添加视觉反馈，配合CSS过渡、JS状态控制及ARIA实时区域确保全用户可感知。
按钮按下时没反应？先检查是否禁用了默认行为
很多开发者给 add-to-cart 按钮加了 event.preventDefault() 或者用 return false 阻止表单提交，却忘了手动触发视觉反馈——结果就是点下去毫无动静，用户以为没点上。
解决方法很简单：保留默认行为（或手动模拟），再叠加反馈。如果是纯前端加购（比如操作本地购物车数组），就别拦着点击事件；如果必须拦截（比如要发 API），那就得自己补上反馈逻辑。
- 用
button[type="button"]替代button[type="submit"]，避免意外触发表单提交 - 若用了
preventDefault()，务必在异步请求前立即执行反馈（比如加 class、改文字） - 别依赖 CSS 的
:active做唯一反馈——iOS Safari 和部分安卓浏览器对:active支持不稳定，尤其在非元素上
用 CSS :active + transition 实现轻量反馈
这是最直接的方式，适合不需要 JS 介入的简单场景，比如静态页面演示或快速原型。
关键不是只写 :active，而是配合 transform 和 transition 让按下有“按下去”的错觉：
立即学习“前端免费学习笔记（深入）”；
.add-btn {
transition: transform 0.1s ease, background-color 0.15s ease;
}
.add-btn:active {
transform: scale(0.96);
background-color: #2563eb;
}
注意点：
-
transition必须写在常态规则里（如.add-btn），不能只写在:active中，否则无动画效果 - 别用
opacity降为 0，会丢失可访问性（屏幕阅读器可能跳过） - 移动端需加
touch-action: manipulation提升响应速度
JS 主动控制状态类比防重复点击更可靠
真实业务中，用户可能连点两下，后端还没返回，按钮就得立刻变样，同时禁用后续点击——这时纯 CSS 不够用，必须靠 JS 控制状态。
推荐用一个统一的状态类名，比如 is-loading，配合 CSS 定义样式：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
.add-btn.is-loading {
opacity: 0.7;
pointer-events: none;
transform: scale(0.98);
}
JS 侧这样调用：
button.addEventListener('click', async () => {
button.classList.add('is-loading');
button.textContent = '添加中...';
try {
await addToCartAPI(item);
button.textContent = '已加入';
setTimeout(() => button.classList.remove('is-loading'), 800);
} catch (err) {
button.textContent = '重新添加';
button.classList.remove('is-loading');
}
});
容易忽略的细节：
- 别在
finally里统一移除is-loading—— 成功和失败后的文案不同，需分别处理 - 移除 class 前加
setTimeout是为了让用户看清“已加入”状态，不然太快闪回原样，体验像没点成功 - 如果按钮本身有图标（比如
<svg></svg>），记得同时控制图标 visibility 或 opacity，否则文字变了图标还亮着
无障碍支持不能只靠视觉反馈
屏幕阅读器用户听不到“按下去了”，他们靠 ARIA 状态和 live region 感知变化。光有缩放和变色远远不够。
最简可行方案是加一个隐藏的实时区域，并动态更新文本：
<div aria-live="polite" aria-atomic="true" class="sr-only"> <span id="cart-status"></span> </div>
然后 JS 更新它：
document.getElementById('cart-status').textContent = '商品已加入购物车';
对应的 CSS（确保不占布局但能被读屏识别）：
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
这步常被跳过，但对视障用户来说，这就是“有没有按成功”的唯一依据。
真正难的不是让按钮动起来，而是让所有用户——无论看、听、还是靠键盘导航——都明确知道“此刻发生了什么”。视觉反馈只是入口，背后得有一整套状态同步逻辑兜底。
