Next.js中如何让div内的Link忽略父级onClick事件？

要让内部的Link组件忽略父级div的onClick事件，只需阻止点击事件向上冒泡即可，具体实现如下：

在Link包裹的span元素上添加onClick事件，调用event.stopPropagation()方法，中断事件向父级div的传递：

<div onClick={() => router.push(`/${post.tag}/status/${id}`)}>
    <Link href={`/${username}`}>
        <span 
            className='text-blue-500 hover:underline'
            onClick={(e) => e.stopPropagation()}
        >
            {username}
        </span>
    </Link>
</div>

原理说明 #

浏览器事件默认会沿DOM树向上冒泡，点击span时会先触发自身关联的Link跳转逻辑，随后事件会传递到父级div触发其onClick回调。通过stopPropagation()可以终止这个冒泡流程，让父级div的onClick不再执行，从而实现点击Link时仅跳转自身指定地址的效果。

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