v135 · miscellaneous
Navigation Source Logger
Every navigation triggered in this page is intercepted by the Navigation API. The NavigateEvent.sourceElement property tells you exactly which element initiated it — link, button, form input, or programmatic JS call. Trigger any of the samples below and watch the log fill in.
checking sourceElement…
NavigateEvent.sourceElement (Chrome 135) is null for programmatic navigations (navigation.navigate(), history.pushState()) and points to the actual DOM element for user-triggered ones. This lets a SPA router know whether to play an element-specific animation, log which "back" button was clicked, or suppress confirm dialogs for internal links.
Trigger a navigation
<button> with navigation.navigate()
Button calls navigation.navigate() — sourceElement is null (programmatic).
<form> submission
Form submit; sourceElement is the <form> element.
Button → link.click()
Script calls link.click() — sourceElement is the <a>, not the button.
Navigation log
| # | URL | sourceElement tag | id / name | navigationType | canIntercept |
|---|---|---|---|---|---|
| No navigations logged yet — trigger one above. | |||||
Code
navigation.addEventListener('navigate', e => {
// Chrome 135: e.sourceElement — the DOM element that triggered it
const src = e.sourceElement;
if (!src) {
console.log('Programmatic navigation to', e.destination.url);
return;
}
console.log(
src.tagName, // 'A', 'FORM', 'BUTTON', …
src.id || src.name, // identifier
'→', e.destination.url
);
// Example: only intercept navigations from internal links
if (src.tagName === 'A' && src.dataset.internal) {
e.intercept({ handler: myRouter });
}
});