Verbodsfout voor linknavigatie in JavaScript

Stel we hebben een link:

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

Laten we onze link in een variabele zetten:

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

Laten we een klik-eventhandler aan onze link binden. We zullen de navigatie via de link voorkomen om te vermijden dat de pagina opnieuw wordt geladen:

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

Het lijkt erop dat we onszelf volledig hebben beveiligd tegen onverwacht gedrag. In werkelijkheid is dit niet het geval. Het zit zo dat wanneer er een syntactische fout optreedt, de JavaScript-code eenvoudigweg niet wordt uitgevoerd, de blokkering van de link werkt niet, en de navigatie ernaartoe zal plaatsvinden.

In dit geval zien we noch het resultaat van de code-uitvoering, noch een fout in de console, omdat de pagina opnieuw wordt geladen. Laten we expres een fout in de code maken en het in de praktijk testen:

link.addEventListener('click', function(event) {
	thiss.textContent = 'text'; // syntactische fout
	event.preventDefault();
});

Dit probleem heeft een kenmerkend teken: als je in de console kijkt op het moment van klikken op de link, zien we kort een rode foutmelding in de console, die bijna meteen weer verdwijnt.

Natuurlijk kunnen we de foutmelding niet op tijd lezen, wat de zoektocht ernaar aanzienlijk bemoeilijkt. Er is echter een slimme truc. Je moet in href van de link een hekje (#) zetten. In dit geval vindt er geen navigatie via de link plaats en zien we de fout die in de console is gegooid:

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