移动端: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></button>、<a></a>、带role="button"的<div> 等) <li>但它不解决语义问题:一个纯 <code><div> 即使有 <code>body的touchstart,若没声明可交互意图,仍可能被忽略元素本身如何被浏览器识别为“可点击”
:active是否生效,取决于浏览器是否把它当“激活目标”。原生<button></button>和<a></a>天然支持;自定义容器必须显式声明。
Java注释规范Skills下载当用户要求为 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()中断。关键反馈不能只赌它。- 监听
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是刚需,不是可选项
- 最轻量方案:










