Next.js Stop Propagation on a nested Link element

Question

I have these tiles that are clickable which while send the user to some external page plus a button inside of the tile that should route the user to some page inside of the site. The problem with this is that when clicking on the button, both events are fired so it sends the user to the external page + navigates to the internal page.

<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>

The event for sendUserToInternalPageEvent is using the nextjs event object for the Link component. I'm trying to stop propagation for sendUserToInternalPageEvent but event.stopPropagation() is undefined. The goal is for sendUserToInternalPageEvent to send the user to an internal page while using the nextjs Link element and have onClick send the user to the external page.

Answer 1

I ended up going this route

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>

Answer 2

For Nextjs 13, you can use e.preventDefault() before your onClick event

Answer 3

For me worked a combination of

onClick={(e) => {
   e.stopPropagation();
   e.nativeEvent.preventDefault();
   // your handler
}}

Answer 4

I would recommend swapping out the link element for a div that has an onClick and uses nextjs' router. For example:

<div onClick={() => router.push("/page")}>
  Content
</div>
  

stopPropagation(e); should then work. Keep in mind that this will remove the autoloading that nextjs normally does for links, which you'll need to re-add yourself.

Answer 5

To prevent triggering the Link if the button clicked, just add passHref in your Link tag and add the following in your button click listener:

onClick={(evt) => {
   evt.preventDefault();
   evt.nativeEvent.stopImmediatePropagation();
   // your handler
}}