Next.js 13：外部onClick与内部Link首次点击无效问题求助

点击内部Link时，事件会先冒泡到外层div，触发setSelection(index)导致组件重新渲染。这会打断Link的第一次点击跳转逻辑——组件重新渲染后，原本的点击事件上下文被重置，所以第一次点击实际只完成了选中状态的切换，第二次点击时组件已完成渲染，Link的跳转才能正常生效。

有两种常用方法可以解决这个事件冲突问题：

方法一：阻止Link的事件冒泡 #

直接在Link的点击事件中阻止事件向上冒泡，这样点击Link时不会触发外层div的onClick，避免组件重新渲染打断跳转：

<div
  className={`relative h-[350px] rounded-2xl (w-[480px]) ${
    index == selection ? 'border-t-2 border-width-[30px] border-solid border-primary-400' : ''
  }`}
  onClick={() => setSelection(index)}
>
  {/* ...Image及其他内容 */}
  <Link href={`/shop/${data.id}`} onClick={(e) => e.stopPropagation()}>
    Watch now
  </Link>
</div>

如果Link内部包含其他子元素，也可以给子元素添加阻止冒泡的逻辑：

<Link href={`/shop/${data.id}`}>
  <span onClick={(e) => e.stopPropagation()}>Watch now</span>
</Link>

方法二：在外层div的onClick中过滤Link点击 #

通过判断点击目标是否属于Link区域，只在点击非Link区域时才执行setSelection：

<div
  className={`relative h-[350px] rounded-2xl (w-[480px]) ${
    index == selection ? 'border-t-2 border-width-[30px] border-solid border-primary-400' : ''
  }`}
  onClick={(e) => {
    // 检查点击目标是否是Link或其后代元素
    const isLinkClicked = e.target.closest('a[href^="/shop/"]');
    if (!isLinkClicked) {
      setSelection(index);
    }
  }}
>
  {/* ...Image及其他内容 */}
  <Link href={`/shop/${data.id}`}>
    Watch now
  </Link>
</div>

这种方法的优势是保留了div其他区域的点击选中逻辑，同时不影响Link的跳转。

内容的提问来源于stack exchange，提问作者Valentino Fabris Valenti