Was ist “javascript:void(0)”? Vollständiger Leitfaden zu Bedeutung, Verwendung und bewährten Vorgehensweisen

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Einführung – Was ist „javascript:void(0)“?

Beim Erlernen von JavaScript stößt man möglicherweise auf die Notation „javascript:void(0)“ im Code. Auf den ersten Blick kann sie schwer zu verstehen sein. Sie ist jedoch eine nützliche Technik, um das Verhalten von Seiten zu steuern und die Ereignisbehandlung zu verwalten.
Dieser Artikel erklärt klar die Bedeutung, den Zweck und die Verwendung von „javascript:void(0)“. Außerdem werden wichtige Vorsichtsmaßnahmen und moderne Alternativen behandelt.

1‑1. Häufige Frage: Was bedeutet „javascript:void(0)“?

„javascript:void(0)“ ist eine Notation, die verwendet wird, um das Standardverhalten von Links oder Buttons zu verhindern und stattdessen benutzerdefiniertes JavaScript auszuführen.
Normalerweise navigiert ein HTML‑<a>‑Tag beim Anklicken zu einer Zielseite. Wenn der Link jedoch wie ein Button funktionieren soll, ohne irgendwohin zu navigieren, ist „javascript:void(0)“ nützlich.
Beispiel:

<a href="javascript:void(0);">Click</a>

Durch das Anklicken dieses Links passiert nichts von selbst. Stattdessen kann man seine eigene JavaScript‑Ereignisbehandlung anhängen.

1‑2. Leserherausforderungen und Ziel des Artikels

Beim Hinzufügen benutzerdefinierter Ereignisbehandlungen zu Webseiten gibt es viele Möglichkeiten, Links und Buttons zu steuern. „javascript:void(0)“ kann jedoch für Anfänger verwirrend sein und bei falscher Verwendung SEO oder Barrierefreiheit beeinträchtigen.
Dieser Artikel behandelt die folgenden Themen, damit Sie es korrekt verstehen und einsetzen können:

1. Das Grundkonzept und die Implementierung von „javascript:void(0)“
2. Vorsichtsmaßnahmen und Nachteile
3. Sicherere und modernere Alternativen

Mit diesem Wissen können Sie modernere und effizientere Web‑Anwendungen erstellen.

2. Grundkonzept von „javascript:void(0)“

„javascript:void(0)“ ist ein JavaScript‑Ausdruck, der hauptsächlich dazu dient, das Standardverhalten von Links oder Buttons zu deaktivieren. Dieser Abschnitt erklärt, wie der void‑Operator funktioniert und was „void(0)“ tatsächlich bedeutet.

2‑1. Was der „void“‑Operator bedeutet

In JavaScript liefert der „void“‑Operator nichts (undefined).
Normalerweise geben JavaScript‑Ausdrücke einen Wert zurück, aber „void“ zwingt das Ergebnis zu undefined. Er wird hauptsächlich verwendet, um das Ergebnis der Auswertung zu ignorieren, während Seiteneffekte ausgeführt werden.
Ein einfaches Beispiel:

console.log(void(0)); // Output: undefined

Damit wird bestätigt, dass void(0) undefined zurückgibt.

2‑2. Was „void(0)“ darstellt

„void(0)“ bedeutet „nichts tun“. Es evaluiert zu undefined und verhindert die Seiten­navigation, während Ihr benutzerdefiniertes Klick‑Verhalten erlaubt bleibt.
Beispiel:

<a href="javascript:void(0);" onclick="alert('Clicked!');">Click</a>

Dieser Link navigiert nicht, löst aber einen Alert aus.

2‑3. Warum „javascript:void(0)“ verwendet wird

Hauptgründe sind:

1. Deaktivieren der Link‑Navigation – Verhindert das Neuladen der Seite, während benutzerdefinierte Klick‑Ereignisse verarbeitet werden.
2. Verwendung als toter Link – Praktisch als Platzhalter während der Entwicklung.
3. Einfach und leicht zu implementieren – Anfängerfreundliche Syntax.

3. Anwendungsbeispiele und Implementierung

Dieser Abschnitt erklärt praxisnahe Anwendungsbeispiele von „javascript:void(0)“, von einfachen Snippets bis zu angewandten Szenarien.

3‑1. Einfaches Code‑Beispiel

<a href="javascript:void(0);">Link</a>

Dieser Link tut beim Anklicken nichts.

3‑2. Anpassen von Klick‑Ereignissen

Beispiel 1: Einen Alert anzeigen

<a href="javascript:void(0);" onclick="alert('Clicked!');">Click</a>

3‑3. Szenario‑basiertes Beispiel

Ein Modal‑Fenster auslösen
HTML:

<a href="javascript:void(0);" id="openModal">Open Modal</a>
<div id="modal" style="display:none; background:rgba(0,0,0,0.5); padding:20px;">
  <p>This is a modal window.</p>
  <button id="closeModal">Close</button>
</div>

JavaScript:

document.getElementById('openModal').addEventListener('click', function() {
  document.getElementById('modal').style.display = 'block';
});
document.getElementById('closeModal').addEventListener('click', function() {
  document.getElementById('modal').style.display = 'none';
});

4. Vorteile und Nachteile – Sollten Sie es wirklich verwenden?

“javascript:void(0)” ist weit verbreitet, hat aber einige Nachteile. Dieser Abschnitt erklärt sowohl Vorteile als auch Vorsichtsmaßnahmen.

4-1. Vorteile

1. Verhindert die Standardnavigation
2. Einfache und intuitive Syntax
3. Nützlich für Platzhalter-Links

4-2. Nachteile

1. SEO‑Auswirkungen Suchmaschinen können den Inhalt von href nicht crawlen.
2. Barrierefreiheitsprobleme Bildschirmleser und Tastaturnavigation funktionieren möglicherweise nicht korrekt.

4-3. Wann verwenden und wann vermeiden

Empfohlene Anwendungsfälle:

• Wie ein Button funktionieren, aber als Link implementiert
• Temporäre tote Links

Vermeiden, wenn:

• Sie SEO‑freundliche Links benötigen
• Barrierefreiheit wichtig ist

5. Alternativen und moderne Best Practices

Obwohl “javascript:void(0)” praktisch ist, gibt es modernere und sicherere Ansätze.

5-1. Verwendung von event.preventDefault()

Konzept
Diese Methode bricht das Standardverhalten ab, wie z.B. die Linknavigation oder das Absenden von Formularen.

Beispiel
HTML:

<a href="#" id="customLink">Link</a>

JavaScript:

document.getElementById('customLink').addEventListener('click', function(event) {
  event.preventDefault();
  alert('Custom event executed!');
});

5-2. Verwendung des <button>‑Tags

HTML5 empfiehlt die Verwendung von <button>‑Elementen, wenn button‑ähnliches Verhalten implementiert wird.

HTML:

<button id="actionButton">Click</button>

JavaScript:

document.getElementById('actionButton').addEventListener('click', function() {
  alert('Button clicked!');
});

5-3. Barrierefreiheits‑ & SEO‑freundliches Beispiel

HTML:

<a href="#" id="accessibleLink" tabindex="0">Click</a>

JavaScript:

document.getElementById('accessibleLink').addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    alert('Executed with Enter key!');
  }
});

6. Beispielcode nach Anwendungsfall

6-1. Erstellen eines Navigationsmenüs

HTML:

<a href="javascript:void(0);" id="menuToggle">Menu</a>
<ul id="menu" style="display: none;">
  <li><a href="#">Home</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
</ul>

JavaScript:

document.getElementById('menuToggle').addEventListener('click', function() {
  const menu = document.getElementById('menu');
  menu.style.display = (menu.style.display === 'none') ? 'block' : 'none';
});

6-2. Modal‑Fenster‑Auslöser

HTML:

<a href="javascript:void(0);" id="openModal">Open Modal</a>
<div id="modal" style="display:none; background:rgba(0,0,0,0.5); padding:20px;">
  <p>This is a modal window.</p>
  <button id="closeModal">Close</button>
</div>

JavaScript:

const modal = document.getElementById('modal');
document.getElementById('openModal').addEventListener('click', function() {
  modal.style.display = 'block';
});
document.getElementById('closeModal').addEventListener('click', function() {
  modal.style.display = 'none';
});

7. Zusammenfassung – Verwendung von “javascript:void(0)” und zukünftige Optionen

7-1. Wichtigste Erkenntnisse

1. Grundkonzept: Deaktivieren des Standard‑Link‑Verhaltens und Ausführen benutzerdefinierter Logik.
2. Vorsichtsmaßnahmen und Alternativen: Verwenden Sie event.preventDefault() oder <button> für SEO und Barrierefreiheit.
3. Praktische Beispiele: Navigationsmenüs, Modal‑Auslöser und mehr.

7-2. Empfehlungen für moderne Entwicklung

Während “javascript:void(0)” noch verwendet wird, legt moderne Entwicklung Wert auf SEO und Benutzerfreundlichkeit.

Empfohlener Ansatz:

• Verwenden Sie “javascript:void(0)” für schnelle Prototypen oder sehr kleine Projekte.
• Verwenden Sie event.preventDefault() oder <button> in Produktionsumgebungen.

7-3. Abschließende Gedanken

Mit den hier vorgestellten Techniken implementieren Sie Code, der sowohl SEO als auch die Benutzererfahrung berücksichtigt.