Reactjs Next.js停止嵌套链接元素上的传播

我有这些可以点击的互动程序，它可以将用户发送到某个外部页面，并在互动程序内部添加一个按钮，将用户路由到站点内部的某个页面。问题是，当点击按钮时，两个事件都会被触发，因此它会将用户发送到外部页面并导航到内部页面

<div
  tabIndex={0}
  role="button"
  onClick={onClick}
>
  <div>
    // some markup
    <Link href={url} passHref>
      <a
        role="button"
        onClick={(e) => sendUserToInternalPageEvent(e)}
      >
        // some text
      </a>
    </Link>
  </div>
</div>

//一些标记
sendUserToInternalPageEvent（e）}
>
//一些文本

---

sendUserToInternalPageEvent

的事件正在使用链接组件的nextjs事件对象。我正在尝试停止

sendUserToInternalPageEvent

的传播，但

event.stopPropagation（）

未定义。目标是让

sendUserToInternalPageEvent

在使用nextjs链接元素时将用户发送到内部页面，并让

onClick

将用户发送到外部页面。

我最终选择了这条路线

<div
  tabIndex={0}
  role="button"
  onClick={onClick}
>
  <div>
    // some markup
    <Link href={url} passHref>
      <a
        role="button"
        onClick={(e) => sendUserToInternalPageEvent(e)}
      >
        // some text
      </a>
    </Link>
  </div>
</div>

const stopPropagation = (e) => {
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
  };

//一些标记
{
停止传播（e）；
如果（！禁用）单击（e）；
}}
>
//一些文本

这个问题对我来说有点难理解，但是如果你想使用链接在锚点上使用event和

stopPropagation

，你可以尝试包装它，例如，

。

@ogostos这并没有给我想要的效果，因为它停止了我需要的其他事件。