event.preventDefault() vs return false: Wie Sie Ihren JavaScript-Code nicht kaputt machen

Einleitung: Warum dieses Thema Stack Overflow sprengt?

Wenn Sie jemals in JavaScript einen Klick-Handler für einen Link oder das Absenden eines Formulars geschrieben haben, sind Sie bestimmt auf die Situation gestoßen, in der der Browser etwas selbst tut und Ihre Logik ignoriert. Sie schreiben alert('Hallo!') bei einem Klick auf einen Link, aber der Browser navigiert stattdessen hartnäckig zu einer anderen Seite. Kommt Ihnen bekannt vor?

Genau hier kommen zwei legendäre Methoden ins Spiel: event.preventDefault() und return false. Die Frage "Was soll ich wählen?" ist eine der beliebtesten auf Stack Overflow mit Zehntausenden von Aufrufen. Und das zu Recht: Der Unterschied zwischen ihnen ist kritisch, und die falsche Wahl kann zu schwer auffindbaren Fehlern führen.

In diesem Artikel klären wir ein für alle Mal:

\n
• Was ist eine "Standardaktion" im Browser?
\n
• Wie funktionieren beide Methoden?
\n
• Der Hauptunterschied, der den Code von Tausenden von Entwicklern kaputt gemacht hat
\n
• Wann man welche Methode verwendet
\n
• Warum return false nicht immer böse ist
\n

Bereit? Los geht's!

1. Was ist eine "Standardaktion"?

Bevor wir über die Methoden sprechen, lassen Sie uns klären, was wir überhaupt abbrechen. Der Browser ist eine intelligente Maschine mit eingebautem Verhalten für viele HTML-Elemente:

\n
• Link (<a>): Standardmäßig navigiert er zu der im href-Attribut angegebenen Adresse.
\n
• Formular (<form>): Standardmäßig sendet es Daten an den Server und lädt die Seite neu.
\n
• Senden-Button (<input type="submit">): Sendet das Formular ab.
\n
• Kontextmenü (Rechtsklick): Zeigt das Browsermenü an.
\n

Manchmal brauchen wir dieses Verhalten – zum Beispiel, wenn der Benutzer wirklich einem Link folgen möchte. Aber oft wollen wir diese Aktion abfangen und unsere eigene Logik ausführen: das Formular vor dem Absenden validieren, den Link in einem modalen Fenster öffnen, ein benutzerdefiniertes Kontextmenü anzeigen.

Genau dafür brauchen wir unsere Helden.

2. event.preventDefault() – die vornehme Methode

Dies ist eine Methode des Ereignisobjekts (event). Sie tut genau eine Sache: Sie bricht die Standardaktion des Browsers ab.

// Beispiel 1: Navigation über einen Link abbrechen\ndocument.querySelector('a').addEventListener('click', function(event) {\n    event.preventDefault();\n    alert('Der Link hat nicht funktioniert! Ich habe ihn abgebrochen.');\n});\n\n// Beispiel 2: Formularabsenden abbrechen\ndocument.querySelector('form').addEventListener('submit', function(event) {\n    event.preventDefault();\n    // Jetzt wird das Formular die Seite nicht neu laden\n    // Man kann einen AJAX-Request oder eine Validierung durchführen\n    console.log('Das Formular wurde nicht gesendet. Wir überprüfen die Daten...');\n});\n

Beachten Sie: preventDefault() stoppt nicht das Bubbling des Ereignisses. Wenn Sie verschachtelte Handler haben, wird das Ereignis weiterhin im DOM-Baum nach oben "bubbeln".

Es ist wichtig zu verstehen: Wenn Sie sowohl die Aktion abbrechen als auch das Bubbling stoppen möchten, müssen Sie beide Methoden aufrufen: preventDefault() und stopPropagation().

3. return false – ein alter, aber gefährlicher Freund

Und return false ist ein etwas komplizierteres Biest. Es hängt alles davon ab, wie genau Sie den Handler hinzufügen.

Fall 1: HTML-Attribute (onclick)

In alten Zeiten (und immer noch in altem Code) wurden Handler direkt in HTML eingebunden:

<a href="https://example.com" onclick="return false;">Klick mich</a>\n\n<form onsubmit="return validateForm();">\n    <input type="submit" value="Senden">\n</form>\n\n<script>\nfunction validateForm() {\n    // Wenn false zurückgegeben wird, wird das Formular nicht gesendet\n    // Wenn true, wird es gesendet\n    return false;\n}\n</script>\n

In