给 body 绑定空 touchstart 事件可绕过 WebKit 的 300ms 点击延迟，使 :active 伪类即时生效；需用 addEventListener 并设 { passive: true }，且仅需绑定一次。
为什么给 body 加空 touchstart 能“修复” :active
这不是修复，是绕过 WebKit 的 300ms 点击延迟机制。iOS Safari 和多数 WebView（如微信、QQ 内置浏览器）默认会等待约 300ms，判断用户是否要双击缩放，期间不触发元素的激活态（:active），导致样式压根不渲染。
给 document.body 绑定一个空的 touchstart 监听器，相当于向浏览器发信号：“这个页面需要响应触摸”，WebKit 就会关闭该上下文下的延迟策略——:active 于是能被正常调度。
- 必须用
addEventListener('touchstart', ...)，ontouchstart = () => {}无效 - 回调函数体可以为空，但不能省略，写成
() => {}或function() {}都行 - 一定要加
{ passive: true }，否则 iOS 11+ 控制台报黄警告，极端情况下监听器会被禁用 - 只执行一次即可，SPA 路由切换后别重复绑定，否则监听器堆积
touchstart 放在 body 上 vs 放在按钮上，效果一样吗
不一样。放在具体按钮上只能激活那个元素的 :active，但很多场景下你希望整页可点击区域都响应——比如导航栏、卡片列表、自定义 div 按钮等。而全局绑定在 body 是最轻量、覆盖最广的兜底方案。
- 放在按钮上：需逐个处理，维护成本高；若动态插入新按钮，还得重新绑定
- 放在
body上：一次生效，所有后代可交互元素（button、a、带role="button"的div等）自动获得:active触发能力 - 但注意：它不解决元素本身不可交互的问题。比如纯
div没加tabindex或role，即使有body的touchstart，iOS 仍可能忽略它的:active
为什么空 touchstart 在某些 WebView 里还是没用
因为 :active 是否触发，还依赖元素是否被浏览器识别为“可交互”。空 touchstart 解决了延迟问题，但没解决语义问题。
立即学习“前端免费学习笔记（深入）”；
- 原生
<button></button>和<a href></a>天然支持，通常没问题 - 自定义
<div class="btn"> 必须显式声明意图：加 <code>role="button" tabindex="0"，或更简单地加ontouchstart=""属性（空字符串即可） - 漏掉
<meta name="viewport">声明？:active可能完全不工作，哪怕绑了事件 - 父容器设了
pointer-events: none或user-select: none？会直接拦截底层事件流，:active根本收不到信号 - 别信 DevTools 的样式面板高亮——打开真机的远程调试，点按瞬间看 Elements 面板里元素是否真的出现
:active标记 - 微信内置浏览器用的是 X5 内核，对
touch-action: manipulation支持不稳定，建议同时加style="touch-action: manipulation;"到按钮上 - Android 部分低端机型（尤其旧版 Chrome）对
transform+:active组合重绘不及时，优先用background-color变化，再叠加opacity或box-shadow: inset
真机测试时最容易忽略的三件事
桌面 Chrome 的设备模拟器（Device Toolbar）对 :active 的模拟非常弱，几乎不触发。你看到“有效”，不代表真机有效。
