Next.js Link组件无法点击问题求助
2026-8-8
Next.js Link组件按钮链接无法点击排查方案
检查元素遮挡：打开浏览器开发者工具，查看按钮上方是否存在其他透明元素（比如高z-index的容器、伪元素）拦截了点击事件。可以临时给按钮添加
z-index: 9999; pointer-events: auto样式测试是否恢复点击。适配Next.js版本写法：如果你的项目用的是Next.js 13+的App Router，Link组件不需要嵌套
<a>标签——App Router的Link本身已内置可点击逻辑，嵌套会导致事件冲突。把代码改成这样试试：
<Link href={`/about/about-dark`} className="butn bord curve mt-40 wow fadeInUp" data-wow-delay=".8s" > <span>Discover</span> </Link>
菜单链接正常可能是因为它们用了正确的对应版本写法。
排查CSS样式问题：检查
.butn类或其父元素是否设置了pointer-events: none，这个属性会直接禁止元素接收点击事件。可以在开发者工具的“计算样式”面板里查看pointer-events的最终值。排除动画插件干扰：移除按钮上的
wow fadeInUp和data-wow-delay属性，测试链接是否能正常点击。Wow.js的动画可能在执行时改变了元素布局，导致点击区域偏移，若恢复正常，需要调整动画的触发时机或样式。
内容的提问来源于stack exchange，提问作者xif
相关产品推荐
相关产品推荐
