Forbudt link-overgangsfejl i JavaScript

Lad os sige, at vi har et link:

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

Lad os få vores link i en variabel:

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

Lad os knytte en klik-håndtering til vores link. Vi vil annullere overgangen på linket for at undgå genindlæsning af siden:

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

Det ser ud til, at vi er fuldstændig beskyttet mod uventet adfærd. Det er faktisk ikke tilfældet. Grunden er, at hvis der opstår en syntaktisk fejl i JavaScript, vil koden simpelthen ikke blive udført, blokeringen af linket vil ikke virke, og overgangen på det vil finde sted.

I dette tilfælde vil vi hverken se resultatet af kodeudførelsen eller en fejl i konsollen, fordi siden vil blive genindlæst. Lad os med vilje lave en fejl i koden og se det i praksis:

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

Dette problem har et karakteristisk kendetegn: hvis man kigger i konsollen i øjeblikket af klikket på linket, vil vi et øjeblik se en rød fejl i konsollen, som næsten øjeblikkeligt forsvinder.

Selvfølgelig når vi ikke at læse fejlteksten, hvilket gør det væsentligt sværere at finde fejlen. Der er dog et smart trick. Du skal sætte en hash (#) i linkets href. I dette tilfælde vil overgangen på linket ikke ske, og vi vil se den kastede fejl i konsollen:

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