移动端浏览器通过点击模拟悬停，二次点击触发链接（不使用jQuery）

别发愁啦，我给你整一个纯原生JavaScript的方案，完全不用依赖jQuery，轻量又好维护，完美适配你的需求！

首先咱们得理清楚核心逻辑：在触摸设备上，第一次点击（tap）要触发和hover一样的样式效果，第二次点击才真正跳转链接；同时桌面端的hover体验还要保持正常。

第一步：统一样式类 #

首先把你原来用CSS :hover 实现的悬停样式，单独抽成一个类，比如叫 hover-active，这样不管是桌面端的hover还是移动端的点击，都能复用这套样式：

/* 链接基础样式 */
.hover-link {
  padding: 8px 14px;
  color: #333;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* 桌面端hover和移动端点击触发的样式 */
.hover-link:hover,
.hover-link.hover-active {
  color: #2563eb;
  background-color: #eff6ff;
  border-radius: 4px;
}

第二步：原生JavaScript实现交互逻辑 #

接下来是核心的JS代码，咱们用原生API来处理点击状态，每个链接的状态独立存储，不会互相干扰：

// 获取所有需要处理的链接元素
const targetLinks = document.querySelectorAll('.hover-link');

targetLinks.forEach(link => {
  // 用dataset存储每个链接的点击状态：0=未触发悬停，1=已触发悬停
  link.dataset.tapState = '0';

  // 绑定点击事件
  link.addEventListener('click', function(e) {
    if (this.dataset.tapState === '0') {
      // 第一次点击：触发悬停样式，阻止默认跳转
      e.preventDefault();
      this.classList.add('hover-active');
      this.dataset.tapState = '1';

      // 额外优化：点击页面其他区域时，重置当前链接的状态和样式
      document.addEventListener('click', function resetState(event) {
        if (!link.contains(event.target)) {
          link.classList.remove('hover-active');
          link.dataset.tapState = '0';
          // 用完就移除这个监听，避免内存占用
          document.removeEventListener('click', resetState);
        }
      }, { once: true });
    } else {
      // 第二次点击：允许正常跳转，同时重置状态
      this.dataset.tapState = '0';
    }
  });

  // 桌面端hover逻辑保持不变
  link.addEventListener('mouseenter', function() {
    this.classList.add('hover-active');
  });

  link.addEventListener('mouseleave', function() {
    this.classList.remove('hover-active');
    // 鼠标离开时重置点击状态，避免回到桌面端时状态混乱
    this.dataset.tapState = '0';
  });
});

关键细节说明 #

• 用dataset.tapState存储每个链接的点击状态，不用全局变量，更安全干净
• 第一次点击阻止默认跳转，添加悬停类；第二次点击放行跳转，重置状态
• 增加了页面其他区域点击的监听，用户点别的地方时自动取消当前链接的悬停状态，体验更自然
• 桌面端的mouseenter和mouseleave事件正常保留，保证桌面用户的原有体验

这样一套下来，不管是桌面端的hover，还是移动端第一次点击触发悬停、第二次点击跳转的需求，都完美满足了，而且完全是原生代码，没有任何jQuery依赖，轻量又高效！

内容来源于stack exchange