Event.explicitOriginalTarget — Eigenschaft · JavaScript-Referenz

Signatur

Event.explicitOriginalTarget

Beschreibung

Die schreibgeschützte Eigenschaft explicitOriginalTarget des Event-Interfaces liefert das ursprüngliche Ziel eines Ereignisses. Anonyme Inhalte werden dabei nicht berücksichtigt. Sie ist eine Gecko-spezifische Erweiterung und gehört zu keinem Standard.

Wird ein Ereignis aus einem anderen Grund als dem Überschreiten einer Grenze zu anonymem Inhalt umgelenkt, zeigt explicitOriginalTarget auf das Ziel vor dieser Umlenkung. Ein typischer Fall: Mausereignisse über einem Textknoten landen bei ihrem Elternelement. event.target ist dann das Element, explicitOriginalTarget dagegen der Text-Knoten selbst.

Früher wurde die Eigenschaft oft verwendet, um beim submit-Ereignis herauszufinden, welcher Button das Formular abgeschickt hat. Beim blur-Ereignis ließ sich damit das Element ermitteln, das den Fokus bekommt. Für beide Aufgaben gibt es heute standardisierte Wege: SubmitEvent.submitter und FocusEvent.relatedTarget.

Anders als originalTarget liefert explicitOriginalTarget nie anonymen Inhalt, etwa interne Knoten nativer Formularelemente.

Rückgabewert

Typ

EventTarget | null | undefined

Beschreibung

Das ursprüngliche, nicht-anonyme Ziel des Ereignisses, zum Beispiel ein Text-Knoten oder ein Element. In Browsern außer Firefox ist der Wert undefined, weil die Eigenschaft dort nicht existiert.

Beispiele

Textknoten als eigentliches Klickziel erkennen

// HTML: <p id="absatz">Hallo <strong>Welt</strong></p>
const absatz = document.getElementById('absatz');

absatz.addEventListener('click', (event) => {
  console.log('target:', event.target.nodeName);
  // Nur in Firefox definiert
  const original = event.explicitOriginalTarget;
  console.log('explicitOriginalTarget:', original?.nodeName ?? 'nicht unterstützt');
});

target: P explicitOriginalTarget: #text (Firefox, Klick auf „Hallo“) explicitOriginalTarget: nicht unterstützt (Chrome/Safari)

Absende-Button ermitteln – mit standardkonformem Fallback

// HTML: <form id="f"><button name="aktion" value="speichern">Speichern</button>
//       <button name="aktion" value="loeschen">Löschen</button></form>
const form = document.getElementById('f');

form.addEventListener('submit', (event) => {
  event.preventDefault();
  // Bevorzugt: standardisiertes SubmitEvent.submitter
  const button = event.submitter ?? event.explicitOriginalTarget ?? null;
  console.log('Aktion:', button?.value ?? 'unbekannt');
});

Aktion: loeschen

Hilfsfunktion mit Feature-Erkennung

const getExplicitTarget = (event) =>
  'explicitOriginalTarget' in event
    ? event.explicitOriginalTarget
    : event.composedPath?.()[0] ?? event.target;

document.addEventListener('mousedown', (event) => {
  const ziel = getExplicitTarget(event);
  console.log(ziel.nodeType === Node.TEXT_NODE ? 'Textknoten' : ziel.nodeName);
});

Textknoten (Firefox, über Text) SPAN (andere Browser)

// Wichtig · Fallstricke

Nicht standardisiert: Die Eigenschaft gibt es nur in Firefox (Gecko). Chrome, Edge und Safari kennen sie nicht, dort ist der Wert undefined. Verlasse dich im Produktivcode nicht darauf und prüfe vorher, ob sie vorhanden ist ('explicitOriginalTarget' in event).
Standardisierte Alternativen: Den absendenden Button liefert SubmitEvent.submitter, das neue Fokusziel bei blur/focusout liefert FocusEvent.relatedTarget. Das innerste Ziel über Shadow-DOM-Grenzen hinweg bekommst du mit event.composedPath()[0].
Textknoten: Der Rückgabewert kann ein Text-Knoten sein. Dort gibt es keine Element-Methoden wie closest() oder classList. Nutze bei Bedarf parentElement.
Nicht verwechseln mit originalTarget (ebenfalls nur in Gecko), das auch anonymen Inhalt zurückgeben kann.

Siehe auch

Event.target Event.originalTarget Event.currentTarget Event.defaultPrevented Event.isTrusted