Next.js移动端需点击两次链接才能切换路由问题求助

问题场景 #

开发Next.js应用时，桌面端交互正常，但移动端在滚动或路由切换后，点击链接、按钮等元素需要两次操作才能触发响应，替换为router.push后问题仍未解决。

可能原因及解决方法 #

1. 隐藏绝对定位元素意外拦截点击 #

你的代码中存在一个absolute z-50的hover提示框，虽然默认是hidden状态，但移动端滚动后可能因位置偏移、hover状态未正确重置，导致它覆盖在可点击元素上方——第一次点击实际触发在这个不可见元素上，第二次才真正点到目标元素。

解决： 给提示框添加pointer-events: none，仅在hover时允许交互：

<div className="hidden rounded-lg p-2 text-xs bg-gray-100 absolute z-50 group-hover:block shadow-md w-48 mt-5 pointer-events-none group-hover:pointer-events-auto">
  This story has been deleted or in draft
</div>

2. 路由切换后焦点丢失 #

Next.js路由切换后，页面焦点可能停留在已销毁的组件元素上，导致第一次点击只是将焦点移到目标元素，第二次才触发点击事件。

解决： 在页面组件中监听路由切换完成事件，强制将焦点重置到页面主容器：

import { useRouter } from 'next/router';
import { useEffect } from 'react';

export default function StoryPage() {
  const router = useRouter();

  useEffect(() => {
    const resetFocus = () => {
      const mainContainer = document.getElementById('main-container');
      if (mainContainer) {
        mainContainer.focus();
      }
    };

    router.events.on('routeChangeComplete', resetFocus);
    return () => router.events.off('routeChangeComplete', resetFocus);
  }, [router]);

  return (
    <main id="main-container" tabIndex="-1" className="focus:outline-none">
      {/* 页面内容，包含问题中的Link组件 */}
    </main>
  );
}

给主容器添加tabIndex="-1"使其可被聚焦，focus:outline-none用于避免聚焦时的默认轮廓样式。

3. 触摸事件与点击事件冲突 #

移动端浏览器的触摸事件（如touchstart）可能和click事件存在延迟或冲突，导致第一次点击被触摸事件拦截。

解决： 给可点击元素添加touch-action: manipulation样式，阻止浏览器的双击缩放等行为，优化触摸事件响应：

<a className="group inline-flex flex-col mb-4 md:mb-11 space-y-2" style={{ touchAction: 'manipulation' }}>
  {/* ... */}
</a>

如果使用Tailwind，可在tailwind.config.js中自定义工具类：

module.exports = {
  theme: {
    extend: {
      touchAction: {
        'manipulation': 'manipulation',
      },
    },
  },
};

之后直接使用touch-action-manipulation类即可。

4. 滚动事件导致元素层级异常 #

检查是否有滚动相关的事件监听，比如滚动时动态修改元素的z-index或定位，导致可点击元素被其他元素覆盖。可以在滚动后通过浏览器开发者工具查看元素的层级和位置，确保目标元素处于最上层。

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