如何点击Next.js Link内部元素时阻止链接触发？

DevOps 小满

2026-7-9

Next.js实现Link嵌套子元素的跳转阻止逻辑

问题场景

在Next.js项目中，使用Link组件包裹了包含点赞按钮的卡片组件，需求是：

点击卡片任意区域时，正常触发Link的页面跳转
点击点赞按钮区域时，仅执行点赞的JavaScript逻辑，不触发跳转
之前尝试用e.nativeEvent.stopImmediatePropagation()未生效，需要实现类似Twitter推文的交互效果，同时保证SEO友好。

解决方案

核心是在点赞按钮的点击事件中，同时阻止事件冒泡和默认行为：

e.stopPropagation()：阻止事件向上冒泡到外层的Link组件
e.preventDefault()：阻止Link对应的a标签默认跳转行为

修改后的代码如下：

子组件LikeCard

'use client'
import React from 'react'

interface LikeTypes {
    likes: number
}

function LikeCard({ likes }: LikeTypes) {
    const likeButtonClicked = () => {
        // 这里写入你的点赞逻辑
        console.log('执行点赞操作')
    };

    return (
        <div 
            className='flex justify-center items-center' 
            onClick={(e) => {
                e.stopPropagation(); // 阻止事件冒泡到外层Link
                e.preventDefault(); // 阻止Link的默认跳转行为
                likeButtonClicked();
            }}
        >
            ❤ {likes}
        </div>
    )
}

export default LikeCard

外层组件使用示例

import Link from 'next/link'
import LikeCard from './LikeCard'

// 父组件示例
function PostCard({ href, likes }: { href: string; likes: number }) {
    return (
        <Link href={href}>
            {/* 卡片其他内容区域，点击会触发跳转 */}
            <div className="card-content">这是卡片的其他内容</div>
            <LikeCard likes={likes} />
        </Link>
    )
}

export default PostCard