:active伪类在移动端失效是因触屏无“按下保持”语义且浏览器为优化滚动而延迟或忽略其触发；可靠方案是用touchstart/touchend手动切换.is-pressed类并配合touch-action和短时transition实现即时反馈。
:active 伪类在移动端点击不生效，根本原因是多数浏览器（尤其是 iOS Safari）为优化滚动性能，默认延迟或忽略 :active 的触发时机——它依赖于「鼠标按下」语义，而触屏设备没有“按下并保持”的自然映射，且 touchstart/touchend 之间若发生滚动，状态会被中断。
为什么 :active 在 iOS/Android 上经常“看不见”
这不是 bug，而是设计行为：
- iOS Safari 仅在
设置了user-scalable=no或禁用双指缩放时，才可能触发:active；但即使如此，也常因 300ms 延迟、快速滑动或 focus 状态缺失而失效 - Android Chrome 对
:active支持稍好，但若元素无cursor: pointer或未绑定任何事件监听器，也可能跳过样式激活 -
:active不会持续到 touchend，甚至在 touchstart 后立刻被取消（例如手指刚触屏就轻微移动）
用 touchstart + touchend 手动模拟激活态
最轻量、兼容性最好的方案：不依赖 :active，改用 JS 切换一个自定义 class（如 .is-pressed），再用 CSS 控制视觉反馈。
- 必须在
touchstart添加 class，在touchend、touchcancel、touchleave中移除，避免状态残留 - 避免直接监听
click—— 它有延迟，且无法捕捉“按住”过程 - 建议对
、等原生可交互元素使用，非容器元素需加role="button"和tabindex="0"保证可访问性
document.addEventListener('touchstart', e => {
const target = e.target.closest('button, a, [role="button"]');
if (target) target.classList.add('is-pressed');
}, { passive: false });
document.addEventListener('touchend', e => {
const target = e.target.closest('button, a, [role="button"]');
if (target) target.classList.remove('is-pressed');
});
document.addEventListener('touchcancel', e => {
const target = e.target.closest('button, a, [role="button"]');
if (target) target.classList.remove('is-pressed');
});
CSS 需配合 pointer-events 和过渡动画
仅加 class 不够，还要确保样式能即时响应、不闪烁、不干扰滚动：
立即学习“前端免费学习笔记（深入）”；
- 给目标元素设置
touch-action: manipulation，让浏览器知道这个区域只用于点击/按压，可提前禁用滚动延迟 - 用
transform: scale(0.95)或opacity变化比 background-color 更流畅，避免重排 - 务必添加
transition，否则变化会突兀；但不要用太长的 duration（建议 ≤ 150ms） - 如果元素有
pointer-events: none或父级拦截了 touch 事件，is-pressed永远不会生效
.btn {
touch-action: manipulation;
transition: transform 0.1s ease, opacity 0.1s ease;
}
.btn.is-pressed {
transform: scale(0.95);
opacity: 0.8;
}
更现代的替代：CSS :focus-visible + :active 组合策略
如果你仍想保留伪类语义，可用渐进增强方式：
- 对键盘用户保留
:focus，对鼠标用户用:active，对触屏用户靠:focus-visible+touchstart补齐 - 注意：iOS Safari 目前不支持
:focus-visible触发逻辑（仅在键盘 tab 时生效），所以不能单独依赖 - 真正可靠的路径仍是显式管理 class，而非等待伪类自动匹配
复杂点在于：你得同时处理 touch、mouse、keyboard 三种输入通道的状态同步，而浏览器不会帮你做跨通道状态映射。别指望一个 CSS 规则覆盖所有场景。
