Fel vid förbud av länkföljning i JavaScript

Låt oss säga att vi har en länk:

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

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

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

Låt oss koppla en klick-hanterare till vår länk. Vi kommer att förhindra navigering på länken för att undvika omladdning av sidan:

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

Det verkar som om vi har skyddat oss helt från oväntat beteende. Men i verkligheten är det inte så. Saken är den att om ett syntaktiskt fel uppstår i JavaScript kommer koden helt enkelt inte att köras, blockeringen av länken kommer inte att fungera, och navigering på den kommer att ske.

I det här fallet kommer vi varken att se resultatet av kodkörningen eller felet i konsolen, eftersom sidan laddas om. Låt oss medvetet göra ett fel i koden och se till i praktiken:

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

Detta problem har ett karakteristiskt kännetecken: om man tittar i konsolen i ögonblicket av klicket på länken, kommer vi under ett ögonblick att se ett rött fel i konsolen, som nästan omedelbart försvinner.

Naturligtvis hinner vi inte läsa felmeddelandet, vilket avsevärt försvårar dess sökning. Det finns dock ett knepigt trick. Man måste sätta ett nummer-tecken i länkens href. I det här fallet kommer navigering på länken inte att ske och vi kommer att se felet som kastas i konsolen:

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