Feil med forbudt lenkeovergang i JavaScript

La oss si at vi har en lenke:

<a href="">lenke</a>

La oss hente lenken vår i en variabel:

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

La oss knytte en klikk-håndterer til lenken vår. Vi vil forhindre navigering via lenken for å unngå at siden lastes på nytt:

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

Det kan virke som om vi er fullstendig beskyttet mot uventet atferd. Det er faktisk ikke slik. Grunnen er at hvis en syntaksfeil oppstår i JavaScript, vil koden rett og slett ikke bli utført, blokkeringen av lenken vil ikke fungere, og navigering vil finne sted.

I dette tilfellet vil vi verken se resultatet av kjørt kode eller en feil i konsollen, fordi siden lastes på nytt. La oss med vilje introdusere en feil i koden og se det i praksis:

link.addEventListener('click', function(event) {
	thiss.textContent = 'tekst'; // syntaksfeil
	event.preventDefault();
});

Dette problemet har et karakteristisk kjennetegn: hvis du ser i konsollen i øyeblikket du klikker på lenken, vil vi i et lite øyeblikk se en rød feilmelding i konsollen, som nesten umiddelbart forsvinner.

Selvfølgelig får vi ikke lest feilmeldingen i tide, noe som betydelig vanskeliggjør feilsøking. Det finnes imidlertid et lurt triks. Du må sette et hashtegn i lenkens href. I dette tilfellet vil ikke navigering via lenken skje, og vi vil se feilen som ble kastet ut i konsollen:

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