:active 在 iOS Safari 和多数 WebView 中需显式声明触摸意图才能生效，最可靠解法是为目标元素添加 ontouchstart="" 属性，并配合 role="button" tabindex="0"（或使用原生 button）、touch-action: manipulation 和 -webkit-tap-highlight-color: transparent 等优化。
:active 在 iOS Safari 和多数 WebView（微信、QQ）里不是“失效”，而是压根不进入激活流程——除非你明确告诉浏览器：“这个元素要响应触摸”。
最直接有效的解法是：**给目标元素加 ontouchstart="" 属性**，配合语义声明和基础 CSS 优化。全局 touchstart 监听器已逐渐失效，尤其在 iOS 15+ 和现代 WebView 中。
为什么 ontouchstart="" 比 body.addEventListener('touchstart', ...) 更可靠
浏览器看到 ontouchstart="" 就认定该元素有触摸意图，立刻启用 :active 的即时渲染链路，无需 JS 执行、无监听器堆积风险、不依赖页面初始化时机。
-
ontouchstart=""是 HTML 层面的声明，iOS Safari 从 iOS 12 起就稳定支持，且对 SSR/静态页友好 -
body绑监听器在 iOS 15+ 后效果大幅减弱，部分场景（如 iframe 内嵌、滚动中点击）完全不触发 - SPA 中重复绑定
touchstart到body容易漏掉removeEventListener，造成内存或行为异常 -
ontouchstart=""只作用于目标元素，不影响其他区域的滚动或缩放逻辑
:active 样式必须搭配可交互语义才生效
仅写 div.btn:active { background: #007aff; } 不够。iOS WebKit 要求元素被识别为“激活目标”，否则跳过状态计算。
- 优先用原生
<button type="button">—— 零配置即生效，自带 focus、键盘导航、屏幕阅读器支持 - 若必须用
<div>，至少补上role="button" tabindex="0"，否则即使有ontouchstart=""，部分旧版 iOS 仍可能忽略 - 避免只靠
cursor: pointer或user-select: none—— 这些不能替代语义声明 - 检查父容器是否设了
pointer-events: none或overflow: hidden，会截断事件流
必须加的两条关键 CSS 规则
:active 在真机上持续极短（约 60–100ms），且容易被系统高亮覆盖或被 :hover/:focus 拦截。视觉反馈必须强且快。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 加
touch-action: manipulation到按钮元素上 —— 告诉浏览器“这里只点按，别等双击、别缩放”，消除 300ms 延迟 - 加
-webkit-tap-highlight-color: transparent—— 干掉 iOS 默认蓝框，否则自定义:active样式会被遮盖 - 慎用
background-color做:active反馈 —— 改transform: scale(0.98)或opacity: 0.8更稳，不触发布局重排 -
:active规则权重不能低于:hover或:focus，否则样式被覆盖（例如.btn:focus { background: blue; }会盖掉.btn:active）
真机测试前最容易漏掉的三件事
开发时在桌面 Chrome 模拟器看到 :active 正常，不代表真机能用。以下必须逐项验证：
立即学习“前端免费学习笔记（深入）”；
- 页面
<head>中有<meta name="viewport" content="width=device-width, initial-scale=1">—— 缺失会导致 iOS 完全跳过:active渲染 - 目标元素没有被
position: fixed+z-index错误遮挡，或被backface-visibility: hidden干扰图层合成 - 没在
touchstart里调用event.preventDefault()—— 即使是空监听器，若设了{ passive: false }，iOS 11+ 会静默禁用该监听器
:active “出现”，而是让它在各种 iOS 版本、各种 WebView 环境下都保持一致的响应节奏和视觉表现。语义声明 + ontouchstart="" + touch-action 这三者缺一不可，少一个，真机上就可能无声无息地失败。 
