DE
RU
EN
ES
ZH
FR
PT
AR
HI
# oder javascript:void(0): Was für JavaScript-Links wählen? Vollständige Erklärung mit Code
Hallo, Entwicklerkollege! Wenn du jemals Links geschrieben hast, die nicht auf eine neue Seite führen, sondern JavaScript-Code ausführen (z. B. ein modales Fenster öffnen, Inhalte nachladen oder eine Animation ausführen), bist du sicherlich auf das Dilemma gestoßen: Welchen Wert für das href-Attribut verwenden? href="#" oder href="javascript:void(0)"?
Diese Frage ist ein echter Hit auf Stack Overflow (tausende Aufrufe!), und das aus gutem Grund. Es scheint eine Kleinigkeit zu sein, aber davon hängt ab, wie sich die Seite verhält: Wird sie nach oben scrollen, erscheint ein Hash in der URL, funktioniert es überhaupt in alten Browsern? Lass uns ein für alle Mal klären, welcher Ansatz besser ist und warum die „richtige“ Antwort nicht so eindeutig ist.
Das Problem: Warum überhaupt den href ändern?
Stell dir vor: Du schreibst einen Button, der ein Menü öffnet:
<a href="#" onclick="openMenu(); return false;">Menü</a>Oder so:
<a href="javascript:void(0)" onclick="openMenu();">Menü</a>Beide Varianten „funktionieren“, aber jede birgt Überraschungen. Vergleichen wir sie anhand der wichtigsten Kriterien.
Variante 1: href="#" — Klassiker mit Haken
# ist ein Link zum „Seitenanfang“. Wenn du einfach <a href="#"> schreibst, scrollt der Browser die Seite nach oben. Um dies zu vermeiden, musst du return false; im Event-Handler hinzufügen:
<a href="#" onclick="doSomething(); return false;">Klick mich</a>Vorteile:
- Barrierefreiheit: Der Link bleibt fokussierbar (mit Tab erreichbar).
- Semantik: Für Screenreader ist es immer noch ein Link (auch wenn er nirgendwo hinführt).
- Einfachheit: Leicht zu merken, schnell geschrieben.
Nachteile:
- Scrollen nach oben: Wenn du
return falsevergisst, verliert der Benutzer seine Position. - Änderung der URL: Ein
#wird in der Adressleiste hinzugefügt (manchmal unerwünscht). - Browser-Verlauf: Es wird ein Eintrag im Verlauf erstellt (die „Zurück“-Taste führt zur vorherigen „#“-Seite).
Variante 2: href="javascript:void(0)" — Hack aus alten Zeiten
javascript:void(0) ist ein JavaScript-Pseudoprotokoll. Es sagt dem Browser: „Führe den Code void(0) aus und folge dem Link nicht“. void(0) gibt undefined zurück, daher bewegt sich die Seite nicht.
<a href="javascript:void(0)" onclick="doSomething();">Klick mich</a>Vorteile:
- Scrollt die Seite nicht — kein
return falsenötig. - Ändert die URL nicht — kein Hash wird hinzugefügt.
Nachteile:
- Probleme mit der Barrierefreiheit: Einige alte Screenreader können über
javascript:im href stolpern. - Verstoß gegen Prinzipien der progressiven Verbesserung: Wenn JavaScript deaktiviert ist, funktioniert der Link nicht (führt ins Leere).
- Ungültiges HTML? Formal ist
javascript:ein nicht standardisiertes Protokoll, aber Browser verstehen es. Der W3C-Validator könnte jedoch meckern. - Schwierigeres Debugging: Wenn ein Fehler im href vorliegt, kann sich der Browser unvorhersehbar verhalten.
