Link navigatiefout in JavaScript

Laten we een fout bespreken die te maken heeft met onverwachte navigatie via een link. Stel dat we de volgende link als voorbeeld hebben:

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

Laten we onze link in een variabele zetten:

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

Laten we een click event handler aan onze link binden:

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

En hier wacht ons een verrassing. De code is correct geschreven, maar de output verschijnt niet in de console. Het probleem is dat er bij een klik navigatie via de link plaatsvindt. Omdat er niets is gespecificeerd in het attribuut href, leidt de link simpelweg naar de huidige pagina.

Dit betekent dat een klik op de link tot gevolg heeft dat de pagina opnieuw wordt geladen. Onze gegevens worden wel naar de console uitgevoerd, maar daarna wordt de pagina herladen, en de console wordt leeg.

Als je goed oplet, dan kun je zien hoe op het moment van klikken de gegevens even in de console verschijnen, en dan verdwijnen. Dit is het kenmerkende teken van deze fout.

Laten we bekijken hoe we dit probleem kunnen oplossen.

Eerste oplossing

In het href attribuut van de link moet je een hekje (#) zetten. Hierdoor zal de link verwijzen naar een specifieke plek op de huidige pagina en bij een klik op de link zal er geen herlading plaatsvinden. Laten we dit doen:

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

Tweede oplossing

Een meer geavanceerde manier is het annuleren van de standaardactie met behulp van de methode preventDefault:

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