按钮点击无响应多因css或事件绑定问题：移动端需cursor: pointer激活:active，否则失效；视觉反馈应监听mousedown/touchstart而非click；disabled会禁用所有交互，改用aria-disabled+自定义class。
按钮点击后没反应、按下去像没按、松手才触发——不是 JS 写错了，八成是 CSS 或事件绑定方式踩了坑。
button:active 为什么点不动
很多开发者以为加个 button:active { background: red; } 就能有按下反馈，结果在 Chrome 或 Safari 里完全不生效。根本原因是：移动端默认禁用 :active 伪类，除非页面启用了 touchstart 或设置了 cursor: pointer；而桌面端某些情况下（比如父容器 pointer-events: none）也会失效。
- 必须给
button显式设置cursor: pointer，否则部分浏览器（尤其是 Safari）压根不激活:active - 移动端要额外加
@media (hover: none) and (pointer: coarse)降级处理，比如用transform: scale(0.98)模拟按下效果 - 别依赖
:active做关键状态提示，它持续时间极短（毫秒级），用户几乎感知不到；真正可用的反馈得靠 JS 控制 class 切换或动画
addEventListener 绑定 click 还是 mousedown
想让按钮“按下去就变色”，用 click 事件永远晚半拍——它只在鼠标抬起（或手指松开）时触发。要模拟真实物理按键感，得监听 mousedown 和 touchstart，再配合 mouseup/touchend 清理状态。
-
click适合执行主逻辑（跳转、提交），但不适合视觉反馈 - 视觉反馈应由
mousedown+touchstart启动，mouseup+touchend+mouseleave三者共同清理，防止手指滑出后状态卡死 - 注意：
touchstart会触发click的延迟（约 300ms），需加meta viewport的width=device-width, user-scalable=no或用fastclick库消除
disabled 状态下点击反馈失效
给按钮设 disabled="true" 后，click、mousedown 全部被拦截，连 :active 都不会触发——这是浏览器原生行为，没法绕过。但 UI 上又常需要“加载中…”按钮仍有视觉反馈（比如按下去缩一下）。
- 不能用
disabled实现“半禁用”状态；改用aria-disabled="true"+ 自定义 class（如.btn--loading） - JS 控制时，别写
btn.disabled = true，改用btn.setAttribute('aria-disabled', 'true')，再手动监听事件并return早退 - CSS 中避免只靠
button:disabled设样式，要用.btn--loading单独控制 opacity、cursor、transform
移动端手指按压无反馈的兼容写法
纯 CSS 的 :active 在 iOS Safari 上基本不可靠，Android 也因 WebView 版本差异表现不一。最稳妥的方式是 JS 主动管理状态 class，并配合硬件加速动画。
- 给按钮加
data-pressed属性，touchstart时设为"true"，touchend时移除 - CSS 写
button[data-pressed="true"] { transform: scale(0.96); transition: transform 0.1s ease; } - 务必加
will-change: transform或transform: translateZ(0)触发 GPU 加速，否则动画卡顿 - 别忘了
touchcancel事件——手指中途取消操作时也要清理状态
真正的点击反馈从来不是“点了有反应”，而是让用户在按下瞬间就确认“我按对了”。这要求你放弃纯 CSS 伪类幻想，把状态管理交还给 JS，再用最小粒度的视觉变化去呼应手指动作——哪怕只是 0.02 秒的缩放，也比等 300ms 后弹个 alert 强。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
