demo · v134

NavigateEvent.sourceElement

The navigate event on the Navigation API now exposes sourceElement — the <a>, <form>, or <area> that triggered the navigation. Click the targets below and watch the log: each entry includes the literal element reference, so SPA routers can branch on attributes without their own delegated listeners.

probing navigation.addEventListener("navigate") + sourceElement...

Try it

link #one special #two link #three (data-extra)

The code

navigation.addEventListener("navigate", (e) => {
  const el = e.sourceElement;
  if (el?.dataset?.kind === "link") {
    // intercept only real link clicks, not programmatic navigates
    e.intercept({ handler: async () => render(e.destination.url) });
  }
});

see also