Next.js 在嵌套的 Link 元素上停止传播

Question

我有这些可点击的图块，同时将用户发送到某个外部页面，以及图块内部的一个按钮，该按钮应将用户路由到网站内的某个页面。这样做的问题是，当单击按钮时，两个事件都会被触发，因此它将用户发送到外部页面+导航到内部页面。

<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使用 Link 组件的 nextjs 事件对象。我试图停止传播sendUserToInternalPageEvent但event.stopPropagation()未定义。目标是sendUserToInternalPageEvent在使用 nextjs Link 元素时将用户发送到内部页面，并将onClick用户发送到外部页面。

Answer 1

我最终走了这条路

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

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