移动端:active不触发是因WebKit为双击缩放引入300ms延迟且忽略非可交互元素；给body绑定passive:true的空touchstart事件可关闭延迟，但需配合ontouchstart=""或role="button"等语义声明。
移动端 :active 伪类不触发，不是你 CSS 写错了，而是浏览器压根没让它进入激活流程——iOS Safari 和多数 WebView 默认跳过非可交互元素的 :active 状态调度。
为什么空 touchstart 绑定在 body 上能“唤醒” :active
WebKit 内核（包括 iOS Safari、微信/ QQ 内置浏览器）为识别双击缩放，默认对所有触摸操作加约 300ms 延迟。这期间不触发任何激活态，:active 样式自然不会渲染。给 document.body 添加一个空 touchstart 监听器，是向浏览器发信号：“本页需即时响应触摸”，从而关闭该上下文的延迟策略。
- 必须用
addEventListener('touchstart', () => {}, { passive: true })，ontouchstart = () => {}无效 - 只执行一次即可；SPA 路由切换后重复绑定会导致监听器堆积
- 放在
body上比逐个元素绑定更轻量，且覆盖所有后代可交互元素（<button>、<a>、带role="button"的<div>等） - 但它不解决语义问题：一个纯
<div>即使有body的touchstart，若没声明可交互意图，仍可能被忽略
元素本身如何被浏览器识别为“可点击”
:active 是否生效，取决于浏览器是否把它当“激活目标”。原生 <button> 和 <a> 天然支持；自定义容器必须显式声明。
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
- 最轻量方案：
ontouchstart=""（空字符串属性），兼容性好，无副作用 - 更稳妥方案：
role="button" tabindex="0"，兼顾无障碍访问和语义正确性 - 辅助手段：
cursor: pointer或onclick=""，部分安卓 WebView 靠这个识别 - 漏掉
<meta name="viewport">？:active可能完全不工作——必须有width=device-width, initial-scale=1 - 父容器设了
pointer-events: none或user-select: none？事件流被拦截，:active根本收不到
为什么仅靠 :active 不够，还得配 JS 手动控制状态
:active 在真机上持续时间极短（iOS 约 100ms），且容易被系统高亮（-webkit-tap-highlight-color）干扰、被 :focus 覆盖、或因 preventDefault() 中断。关键反馈不能只赌它。
立即学习“Java免费学习笔记（深入）”；
- 监听
touchstart加类（如is-pressed），touchend/touchcancel移除——注意touchcancel必须处理，否则滑出松手会卡住状态 - 用
event.target.closest('button, a, [role="button"]')定位目标，避免事件代理丢失原生语义 - 加
touch-action: manipulation到目标元素，告诉浏览器“这里只做点按”，提升响应优先级并抑制滚动延迟 - CSS 中不要只靠
:active控制颜色或背景：改transform或opacity更安全；避免在:active里改height、margin触发布局重排 - 过渡动画要写在常态选择器上，例如
button { transition: transform 0.1s; }，而非button:active { transition: ... }
真机调试时最容易忽略的三件事
桌面 Chrome 的设备模拟器对 :active 模拟极弱，几乎不触发；DevTools 样式面板高亮也不代表真机有效。
- 必须用 Safari 远程调试或 Chrome for iOS 的真机 inspect，点按瞬间看 Elements 面板里元素是否真的出现
:active状态 - 别信“写了
ontouchstart=""就万事大吉”——检查元素是否被pointer-events: none的父层遮挡 - 某些安卓机型在
position: fixed或transform元素上仍卡顿，此时touch-action: manipulation是刚需，不是可选项
