Fehler beim Folgen von Links in JavaScript

Lassen Sie uns einen Fehler analysieren, der mit einem unerwarteten Folgen eines Links verbunden ist. Nehmen wir als Beispiel den folgenden Link:

<a href="">link</a>

Holen wir uns unseren Link in eine Variable:

let link = document.querySelector('a');

Weisen wir unserem Link einen Klick-Handler zu:

link.addEventListener('click', function() {
	console.log(this.textContent);
});

Und hier erwartet uns eine Überraschung. Der Code ist korrekt geschrieben, jedoch erscheint nichts in der Konsole. Die Sache ist die, dass beim Klick dem Link gefolgt wird. Da im Attribut href nichts angegeben ist, führt der Link einfach auf die aktuelle Seite.

Das bedeutet, dass ein Klick auf den Link zu einem Neuladen der Seite führt. Das heißt, unsere Daten werden in der Konsole ausgegeben, dann wird die Seite neu geladen, und die Konsole wird leer.

Wenn man genau hinschaut, dann kann man sehen, wie im Moment des Klicks Daten für einen Augenblick in der Konsole erscheinen, um dann zu verschwinden. Das ist das charakteristische Merkmal dieses Fehlers.

Lassen Sie uns anschauen, wie man dieses Problem lösen kann.

Erste Lösung

In href des Links muss man ein Doppelkreuz setzen. Dies führt dazu, dass der Link auf eine bestimmte Stelle der aktuellen Seite verweist und beim Klick auf den Link kein Neuladen erfolgt. Machen wir das:

<a href="#">link</a>

Zweite Lösung

Eine fortgeschrittenere Methode ist das Abbrechen der Standardaktion mit Hilfe der Methode preventDefault:

link.addEventListener('click', function(event) {
	console.log(this.textContent);
	event.preventDefault();
});