移动端如何手动清除链接的点击/悬停/激活/聚焦状态？

核心思路 #

放弃依赖原生blur()或事件解绑，改用自定义CSS类控制视觉状态，配合JS监听点击/滚动事件手动切换类，既满足状态切换需求，又保留链接原生的focusability特性。

步骤1：定义CSS状态规则 #

通过类明确区分默认状态和激活状态，同时保留原生focus样式（按需调整）：

/* 默认链接样式 */
.list-item a {
  color: #ffffff;
  transition: color 0.2s ease;
}

/* 自定义激活状态（点击后触发） */
.list-item a.active-link {
  color: #9333ea; /* 紫色 */
}

/* 保留原生focus状态，满足可聚焦需求 */
.list-item a:focus {
  outline: 2px solid #9333ea;
  color: #9333ea;
}

步骤2：JS事件监听与状态切换 #

通过事件监听实现点击激活、滚动重置逻辑，同时给滚动事件加防抖优化性能：

// 获取所有目标列表项
const listItems = document.querySelectorAll('.list-item');

// 防抖函数：避免滚动事件频繁触发导致性能问题
function debounce(func, delay = 100) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(func, delay);
  };
}

// 点击列表项：给对应链接添加激活类
listItems.forEach(item => {
  const link = item.querySelector('a');
  item.addEventListener('click', () => {
    // 先清除其他链接的激活状态
    document.querySelectorAll('.list-item a.active-link').forEach(el => el.classList.remove('active-link'));
    // 激活当前链接
    link.classList.add('active-link');
  });
});

// 页面滚动：清除所有链接的激活状态
window.addEventListener('scroll', debounce(() => {
  document.querySelectorAll('.list-item a.active-link').forEach(el => el.classList.remove('active-link'));
}));

补充：处理触摸交互（可选） #

如果需要适配移动端触摸触发的状态，可额外添加touchstart事件监听：

listItems.forEach(item => {
  const link = item.querySelector('a');
  item.addEventListener('touchstart', () => {
    link.classList.add('active-link');
  });
});

这个方案完全规避了blur()无效、事件解绑丢失聚焦性的问题，在2023+的移动端浏览器中兼容性拉满，逻辑直接可控。

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