如何解决触屏轻触误触发hover、无法触发.active/.focus状态的问题

核心问题根源 #

移动端触屏浏览器的默认交互逻辑，是对可交互元素做模拟鼠标行为的兼容处理：第一次轻触链接时，会先给元素绑定临时的hover状态，等待下一次触摸确认是真实点击后，才会触发真实的active点击事件。这就直接导致两类异常：轻触触发的hover动画无法自动消退，本该响应的点击动画被延迟甚至抢占。

落地配置方案 #

完全匹配“触屏端优先保留点击动画、舍弃低价值hover效果”的需求，按以下三层配置调整即可：

1. 用特性媒体查询隔离非触屏设备的hover逻辑 #

把所有原本写在:hover伪类上的动画（包括链接自身的hover动画、后续联动元素的动画），全部移入支持真实悬停的设备专属媒体查询中：

/* 仅在支持真实hover的非触屏设备上加载hover动画 */
@media (hover: hover) {
  .custom-link:hover {
    /* 原有链接hover动画代码 */
  }
  .custom-link:hover + .sibling-linked-element {
    /* 原有链接后方的联动动画代码 */
  }
}

这个媒体查询的判断逻辑为：当前设备是否支持不依赖触摸的真实悬停操作。所有触屏设备的浏览器都会自动匹配hover: none规则，完全不会加载这段代码里的hover动画，从根源上避免轻触时触发hover的问题。

2. 单独为触屏设备配置点击动画的触发规则 #

针对hover: none的触屏设备场景，单独定义点击相关的动画触发条件，绕开浏览器默认的hover模拟逻辑：

/* 仅在无真实hover的触屏设备上生效 */
@media (hover: none) {
  .custom-link:active,
  .custom-link:focus-visible {
    /* 原有点击状态对应的outro收尾动画代码 */
  }
  /* 移除触屏端默认的焦点样式干扰 */
  .custom-link:focus {
    outline: none;
  }
}

这里用:focus-visible替代通用的:focus伪类，是因为触屏点击触发的元素焦点状态，不会触发:focus-visible的样式规则，避免多余的样式叠加；只有用户用键盘导航、tab切换聚焦链接时，才会显示对应的焦点样式，完全符合预期的交互表现。

3. 老旧触屏浏览器的兜底兼容 #

针对部分不支持hover媒体查询的老旧触屏浏览器，可以补一段极轻量的判断逻辑做兜底：

• 页面初始化时监听首次touchstart事件，一旦触发就给<html>根元素添加is-touch类
• 把所有hover规则的选择器补充:not(.is-touch *)前缀限制，确保只要页面发生过触摸操作，所有hover样式就完全失效

调整后的交互表现 #

• 非触屏设备：原有的hover联动动画、点击动画逻辑完全不受影响，保持原有体验
• 触屏设备：轻触链接时不会出现卡顿的hover状态，直接触发预设的outro收尾动画，跳转前的过渡效果能正常运行，不会出现无限加载的感知问题

内容的提问来源于stack exchange，提问作者Ean