Event.preventDefault() — Methode · JavaScript-Referenz

Signatur

Event.prototype.preventDefault()

Beschreibung

preventDefault() teilt dem Browser mit, dass Ihr Code das Ereignis selbst behandelt. Die Standardaktion des Browsers wird deshalb nicht ausgeführt. Beispiele dafür sind das Folgen eines Links, das Absenden eines Formulars mit Neuladen der Seite, das Umschalten einer Checkbox, das Öffnen des Kontextmenüs oder das Scrollen per Mausrad bzw. Touch.

Das Ereignis selbst läuft aber normal weiter. Es wird also weiterhin durch den DOM-Baum weitergereicht (Capturing und Bubbling), und andere Listener werden trotzdem aufgerufen. Wenn Sie die Weitergabe stoppen möchten, brauchen Sie stopPropagation() bzw. stopImmediatePropagation(). Ob die Standardaktion verhindert wurde, zeigt die Eigenschaft event.defaultPrevented.

Die Methode wirkt nur, wenn das Ereignis abbrechbar ist (event.cancelable === true). Bei nicht abbrechbaren Ereignissen wie scroll, load oder focus hat der Aufruf keine Wirkung. Typische Anwendungen sind Formularvalidierung mit Absenden per fetch(), Routing in Single-Page-Apps, eigene Tastenkürzel, Drag & Drop (dragover muss abgebrochen werden, damit drop ausgelöst wird) und eigene Kontextmenüs.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined). Ob der Aufruf gewirkt hat, zeigt danach event.defaultPrevented.

Beispiele

Formular per fetch absenden statt neu zu laden

const form = document.querySelector('#kontakt');

form.addEventListener('submit', async (event) => {
  event.preventDefault(); // kein Neuladen der Seite

  const daten = new FormData(form);
  const antwort = await fetch('/api/kontakt', {
    method: 'POST',
    body: daten
  });

  console.log(antwort.ok ? 'Gesendet' : 'Fehler beim Senden');
});

Gesendet

Links für clientseitiges Routing abfangen

document.addEventListener('click', (event) => {
  const link = event.target.closest('a[data-route]');
  if (!link) return;
  // Strg/Cmd-Klick weiterhin in neuem Tab öffnen lassen
  if (event.ctrlKey || event.metaKey || event.button !== 0) return;

  event.preventDefault();
  history.pushState({}, '', link.href);
  console.log('Route gewechselt zu', location.pathname);
});

Route gewechselt zu /produkte

Eigenes Tastenkürzel Strg+S

const speichern = () => console.log('Entwurf gespeichert');

const onKeydown = (event) => {
  if ((event.ctrlKey || event.metaKey) && event.key === 's') {
    event.preventDefault(); // Dialog „Seite speichern“ unterdrücken
    speichern();
  }
};

document.addEventListener('keydown', onKeydown);
// Später wieder entfernen:
// document.removeEventListener('keydown', onKeydown);

Entwurf gespeichert

Drag & Drop: dragover abbrechen und cancelable prüfen

const zone = document.querySelector('#dropzone');

zone.addEventListener('dragover', (event) => {
  event.preventDefault(); // nötig, damit 'drop' ausgelöst wird
});

zone.addEventListener('drop', (event) => {
  event.preventDefault(); // Browser soll die Datei nicht öffnen
  console.log(event.cancelable, event.defaultPrevented);
  const dateien = [...event.dataTransfer.files].map((f) => f.name);
  console.log('Abgelegt:', dateien);
});

true true Abgelegt: ['bericht.pdf']

// Wichtig · Fallstricke

Passive Listener: Wird ein Listener mit { passive: true } registriert, ignoriert der Browser preventDefault() und gibt eine Warnung in der Konsole aus. Chrome und Firefox behandeln touchstart, touchmove und wheel auf window, document und body standardmäßig als passiv. Wenn Sie das Scrollen blockieren wollen, müssen Sie ausdrücklich { passive: false } angeben.
Nicht abbrechbare Ereignisse: Bei event.cancelable === false hat der Aufruf keine Wirkung. Das Scrollen lässt sich z. B. nicht über das scroll-Ereignis verhindern, sondern nur über wheel, touchmove oder keydown.
Nicht mit stopPropagation verwechseln: preventDefault() hält das Bubbling nicht an. Andere Listener laufen weiter.
Zeitpunkt: Der Aufruf muss synchron während der Ereignisbehandlung erfolgen. Nach einem await oder in einem setTimeout ist die Standardaktion bereits ausgeführt.
return false verhindert die Standardaktion nur in on…-Properties bzw. Inline-Handlern, nicht aber in addEventListener. In jQuery bewirkt return false dagegen zusätzlich stopPropagation().
Barrierefreiheit: Unterdrücken Sie Standardverhalten wie Tab-Navigation oder Links nicht ohne gleichwertigen Ersatz. Ein vollständig verhindertes keydown kann die Tastaturbedienung unbrauchbar machen.
Bei eigenen Ereignissen (new CustomEvent(...)) muss cancelable: true gesetzt sein. dispatchEvent() gibt dann false zurück, wenn ein Listener preventDefault() aufgerufen hat.

Siehe auch

Event.stopPropagation() Event.stopImmediatePropagation() Event.defaultPrevented Event.cancelable EventTarget.addEventListener() EventTarget.dispatchEvent() Event