Länkklicksfel i JavaScript

Låt oss analysera ett fel relaterat till oväntad länknavigering. Låt oss som exempel ta följande länk:

<a href="">länk</a>

Låt oss hämta vår länk i en variabel:

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

Låt oss koppla en klickhanterare till vår länk:

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

Och här väntar en överraskning. Koden är skriven korrekt, men utskriften i konsolen visas inte. Anledningen är att ett klick leder till navigering via länken. Eftersom inget är specificerat i attributet href, så leder länken helt enkelt till den aktuella sidan.

Det betyder att ett klick på länken leder till en omladdning av sidan. Det vill säga vår data skrivs ut till konsolen, sedan laddas sidan om, och konsolen blir tom.

Om man tittar noga kan man se hur data i ögonblicket för klicket dyker upp i konsolen för ett ögonblick, för att sedan försvinna. Detta är det karakteristiska kännetecknet för detta fel.

Låt oss se hur man kan lösa detta problem.

Första lösningen

I href för länken behöver man sätta ett nummertecken. Detta kommer att leda till att länken pekar på en specifik plats på den aktuella sidan och ett klick på länken inte kommer att orsaka omladdning. Låt oss göra så:

<a href="#">länk</a>

Andra lösningen

Ett mer avancerat sätt är att avbryta standardåtgärden med hjälp av metoden preventDefault:

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