Event.defaultPrevented — Eigenschaft · JavaScript-Referenz

Signatur

Event.defaultPrevented

Beschreibung

Die Eigenschaft defaultPrevented des Event-Interfaces ist true, sobald ein Listener event.preventDefault() für ein abbrechbares Ereignis (event.cancelable === true) aufgerufen hat. Andernfalls ist sie false. Die Eigenschaft kann nur gelesen werden. Zurücksetzen lässt sie sich nicht.

Nützlich ist sie vor allem dann, wenn mehrere Listener unabhängig voneinander auf dasselbe Ereignis reagieren, etwa in Komponenten-Bibliotheken, bei Event-Delegation oder bei Router-Links. Ein später ausgeführter Listener (zum Beispiel einer auf document) kann so erkennen, dass ein anderer Codeteil das Ereignis schon „übernommen“ hat, und seine eigene Standardlogik überspringen.

Auch bei selbst ausgelösten Ereignissen ist die Eigenschaft hilfreich. Hat man ein CustomEvent mit cancelable: true erzeugt, erfährt man nach dispatchEvent() über defaultPrevented (oder den Rückgabewert von dispatchEvent()), ob ein Abnehmer die geplante Aktion abgelehnt hat. So lassen sich Veto-Mechanismen bauen, zum Beispiel „Vor dem Schließen nachfragen“.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn die Standardaktion des Ereignisses per preventDefault() unterdrückt wurde, sonst false.

Beispiele

Globaler Klick-Handler achtet auf vorherige Listener

// Komponenten-Listener unterdrückt die Navigation
document.querySelector('#spezial-link').addEventListener('click', (event) => {
  event.preventDefault();
  console.log('Spezial-Link lokal behandelt');
});

// Globaler Router per Event-Delegation
document.addEventListener('click', (event) => {
  if (event.defaultPrevented) {
    console.log('Schon behandelt, Router überspringt');
    return;
  }
  const link = event.target.closest('a[href^="/"]');
  if (!link) return;
  event.preventDefault();
  history.pushState(null, '', link.href);
  console.log('Router navigiert zu', link.pathname);
});

Spezial-Link lokal behandelt Schon behandelt, Router überspringt

Veto-Mechanismus mit CustomEvent

const dialog = document.querySelector('#editor');

// Abnehmer: bei ungespeicherten Änderungen das Schließen verhindern
dialog.addEventListener('before-close', (event) => {
  if (dialog.dataset.dirty === 'true') {
    event.preventDefault();
  }
});

const closeDialog = () => {
  const event = new CustomEvent('before-close', { cancelable: true });
  dialog.dispatchEvent(event);

  if (event.defaultPrevented) {
    console.log('Schließen abgebrochen');
    return;
  }
  dialog.hidden = true;
  console.log('Dialog geschlossen');
};

dialog.dataset.dirty = 'true';
closeDialog();

Schließen abgebrochen

Nicht abbrechbare Ereignisse

const event = new Event('ping'); // cancelable ist standardmäßig false

document.addEventListener('ping', (e) => e.preventDefault());
document.dispatchEvent(event);

console.log(event.cancelable);       // false
console.log(event.defaultPrevented); // false – preventDefault() hatte keine Wirkung

false false

// Wichtig · Fallstricke

Nur bei abbrechbaren Ereignissen: Ist event.cancelable false (z. B. bei scroll oder bei new Event() ohne cancelable: true), bewirkt preventDefault() nichts, und defaultPrevented bleibt false.
Passive Listener: In Listenern, die mit { passive: true } registriert wurden, wird preventDefault() ignoriert. Chrome gibt dann eine Konsolenwarnung aus. Viele Browser registrieren touchstart, touchmove und wheel auf window/document/body standardmäßig als passiv.
Reihenfolge zählt: Die Eigenschaft spiegelt nur wider, was bis jetzt passiert ist. Listener, die später in der Ereignis-Weiterleitung laufen (Bubbling nach oben), sehen den Wert. Frühere Listener sehen ihn nicht.
return false in einem on…-Handler-Attribut bzw. einer Handler-Eigenschaft wirkt wie preventDefault() und setzt defaultPrevented ebenfalls auf true. In addEventListener-Listenern hat return false dagegen keine Wirkung.
Das veraltete event.returnValue ist die Umkehrung dieses Werts (!defaultPrevented) und sollte in neuem Code nicht mehr verwendet werden.
Kompatibilität: Unterstützt in allen modernen Browsern, ab Internet Explorer 9 und in Node.js (ab Version 15, EventTarget).

Siehe auch

Event.preventDefault() Event.cancelable Event.stopPropagation() EventTarget.dispatchEvent() CustomEvent EventTarget.addEventListener() ElementInternals.ariaSelected