Signatur
Beschreibung
Die Eigenschaft sourceElement eines NavigateEvent gibt das DOM-Element zurück, von dem die Navigation ausging. Das ist typischerweise ein angeklicktes <a>- oder <area>-Element. Bei einem Formularversand ist es der auslösende Absende-Button (submitter). Fehlt dieser, etwa bei form.submit(), ist es das <form>-Element selbst.
Wurde die Navigation nicht durch ein Element ausgelöst, ist der Wert null. Das betrifft z. B. navigation.navigate(), location.href = …, history.back(), den Zurück-Button des Browsers oder Eingaben in der Adressleiste.
In einer Single-Page-Anwendung ist die Eigenschaft nützlich, wenn Sie im navigate-Handler je nach Auslöser unterschiedlich reagieren wollen. Beispiele: Links mit einem bestimmten data--Attribut vom Abfangen ausnehmen, am angeklickten Button einen Ladezustand anzeigen oder für die Analyse erfassen, welcher Link geklickt wurde.
Rückgabewert
null, wenn die Navigation nicht von einem Element ausging.Beispiele
Auslösendes Element protokollieren
navigation.addEventListener('navigate', (event) => {
const quelle = event.sourceElement;
if (quelle) {
console.log('Navigation ausgelöst durch:', quelle.tagName, quelle.textContent.trim());
} else {
console.log('Navigation ohne auslösendes Element (Skript, Zurück-Button, Adressleiste …)');
}
});Bestimmte Links nicht abfangen
navigation.addEventListener('navigate', (event) => {
if (!event.canIntercept || event.hashChange || event.downloadRequest) return;
// Links mit data-no-spa lösen eine normale Navigation mit vollständigem Seitenladen aus
if (event.sourceElement?.closest('[data-no-spa]')) return;
const url = new URL(event.destination.url);
event.intercept({
handler: async () => {
const res = await fetch(url.pathname + '?partial=1');
document.querySelector('main').innerHTML = await res.text();
}
});
});Ladezustand am Absende-Button eines Formulars
navigation.addEventListener('navigate', (event) => {
if (!event.formData || !event.canIntercept) return;
const button = event.sourceElement instanceof HTMLButtonElement
? event.sourceElement
: null;
event.intercept({
handler: async () => {
button?.setAttribute('aria-busy', 'true');
if (button) button.disabled = true;
try {
await fetch(event.destination.url, { method: 'POST', body: event.formData });
} finally {
button?.removeAttribute('aria-busy');
if (button) button.disabled = false;
}
}
});
});// Wichtig · Fallstricke
- Browser-Unterstützung: Die Navigation API gibt es in Chromium-Browsern schon länger,
sourceElementkam aber erst später hinzu (ab etwa Chromium 140). In Firefox und Safari kann die Eigenschaft fehlen. Prüfen Sie sie mit'sourceElement' in NavigateEvent.prototypeund rechnen Sie mitundefined. - Prüfen Sie immer auf
null(z. B. mit?.). Viele Navigationen haben kein auslösendes Element, etwa Durchlaufen des Verlaufs, Skriptaufrufe oder die Adressleiste. - Bei Formularen ist der Wert der Absende-Button und nicht zwingend das
<form>-Element. Das Formular erreichen Sie übersourceElement.formbzw.closest('form'). - Löst ein Element aus einem anderen Dokument die Navigation aus (z. B. ein Link in einem anderen Frame mit
target), ist der Wert aus Sicherheitsgründen normalerweisenull, besonders wenn der Ursprung ein anderer ist. - Die Eigenschaft ist schreibgeschützt. Wenn Sie ihr etwas zuweisen, passiert nichts; im Strict Mode wird ein Fehler geworfen.