移动端 :active 状态延迟或不触发是因为浏览器默认启用300ms点击延迟以判断双击缩放，导致样式响应滞后或失效；可靠方案是用 touchstart/touchend/touchcancel 事件配合临时 class 控制视觉反馈。
为什么移动端点击后 :active 状态延迟或不触发
因为浏览器在移动端默认启用 300ms 点击延迟，用于判断用户是否要双击缩放。这会导致 :active 样式无法即时响应——哪怕你写了 button:active { opacity: 0.7; }，点击后也要等几百毫秒才生效，甚至在某些 WebView（比如微信内置）里直接不触发。
用 touchstart + touchend 模拟 active 状态更可靠
CSS 的 :active 在触摸设备上行为不稳定，尤其 iOS Safari 和多数 Android WebView。更可控的做法是用 JS 监听 touchstart 添加临时 class，touchend 或 touchcancel 移除它：
element.addEventListener('touchstart', () => {
element.classList.add('is-pressed');
});
element.addEventListener('touchend', () => {
element.classList.remove('is-pressed');
});
element.addEventListener('touchcancel', () => {
element.classList.remove('is-pressed');
});
对应 CSS 写成：.btn.is-pressed { opacity: 0.7; }。注意别只监听 touchend，否则手指滑出再松开，状态会卡住。
加 cursor: pointer 有时能意外激活 :active
部分 Android 浏览器（如旧版 Chrome）在元素有 cursor: pointer 时，会把该元素识别为“可点击”，从而让原生 :active 生效。但这不是规范行为，iOS 完全不买账。可以当临时补丁用，但不能依赖：
-
button、a这类语义化可点击元素一般自带效果，不用额外加 - 对
div或span加了cursor: pointer后，再加touch-action: manipulation可能提升响应率 - 如果用了
pointer-events: none，:active必定失效，连 touch 事件都收不到
避免用 :active 做关键交互反馈
真正需要用户确认的反馈（比如按钮按下后变色、弹出 loading），必须用 JS 控制 class 或内联样式。CSS :active 只适合做轻量、非关键的视觉提示，且要接受它在部分场景下“不可靠”。
另外，touch-action: manipulation 能禁用双击缩放，消除 300ms 延迟，但它只影响事件触发时机，不修复 :active 本身在某些 WebView 中的缺失问题——这点很容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
