touch-action: manipulation 必须加在 button、a、role="button" 的 div 等可点击语义化元素上才生效，全局设置无效且可能阻断滑动；需配合 role/tabindex/ontouchstart 确保可点击身份，用 transform/opacity 实现 :active 反馈，并设 -webkit-tap-highlight-color: transparent。
touch-action: manipulation 加在哪才生效
它只对具体可点击元素起作用，不是全局开关。写在 body 或 * { touch-action: manipulation } 上，大概率失效，还可能让轮播图、列表滑不动。
必须加在真正响应点击的地方：button、a、带 role="button" 的 div、或 Bootstrap 里的 [data-bs-toggle] 等语义化目标上。
- 检查 DevTools 的 Computed 面板，确认
touchAction值确实是manipulation，而不是被父容器的touch-action: none覆盖 - Android 4.4+ 和 iOS 9.2+ 全面支持；旧版 UC 或部分 WebView 返回空字符串，说明未识别，需降级
-
cursor: pointer在移动端无效，别指望它激活:active
:active 不触发，先看元素有没有“可点击身份”
iOS Safari 只对浏览器认定为“可交互”的元素启用 :active，比如 button、a。纯 div 即使写了 .btn:active，也大概率被跳过计算——不是样式没写对，是压根不进伪类匹配流程。
- 最稳妥：直接用
<button type="button">，零配置即生效 - 次选：给
div加role="button" tabindex="0"，兼顾键盘和读屏器 - 轻量方案：加空属性
ontouchstart=""，现代 iOS 支持良好，但 SPA 动态插入的新按钮也要手动补上 - 别信
onclick就自动生效——有些 WebView 仍要求显式role或tabindex
视觉反馈不能只靠 :active
即使 touch-action 和语义都到位，:active 生命周期极短（毫秒级），用 background-color 或 box-shadow 做反馈容易卡顿或被系统高亮盖住。
立即学习“前端免费学习笔记（深入）”；
- 只用
transform和opacity：例如.btn:active { transform: scale(0.96); opacity: 0.85; } - 过渡时间要短：
transition: transform 0.08s ease, opacity 0.12s ease，太长反而显得拖沓 - 必须配
-webkit-tap-highlight-color: transparent，否则 iOS 系统灰层会覆盖你的:active样式 - 触控区域至少
min-height: 48px，iOS 对尺寸有硬性要求，文字撑不开点击区时:active直接被忽略
真机测试前必查的三个盲点
本地模拟器永远正常，问题全在真机链路上。上线前漏掉任意一项，用户就会觉得“按钮点不动”。
-
viewportmeta 标签是否在<head>最顶部？缺initial-scale=1.0或写错位置，touch-action白加 - 父容器有没有
pointer-events: none或overflow: hidden？触摸事件传不到目标，:active根本不会触发 - 组件库是否还在用
fastclick？它和touch-action: manipulation冲突，会导致重复触发或事件丢失
