Linkin siirtymisen estovirhe JavaScriptissä

Oletetaan, että meillä on linkki:

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

Haetaan linkki muuttujaan:

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

Liitetään linkkiimme klikkauskäsittelijä. Estetään samalla siirtyminen linkin kautta välttääksemme sivun uudelleenlataamisen:

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

Voi vaikuttaa siltä, että olemme täysin suojautuneet odottamattomalta käyttäytymiseltä. Itse asiassa nin ei ole. Asia on siinä, että syntaktisen virheen tapahtuessa JavaScript-koodia ei suoriteta, linkin esto ei toimi, ja siirtyminen tapahtuu.

Tässä tapauksessa emme näe koodin suorituksen tulosta eikä virhettä konsolissa, koska sivu latautuu uudelleen. Tehdään tarkoituksella virhe koodiin ja varmistutaan käytännössä:

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

Tällaisella ongelmalla on tunnusomainen piirre: jos katsomme konsolia linkkiä klikatessa, näemme hetkellisesti punaisen virheen konsolissa, joka katoaa melkein heti.

Tietenkään emme ehdi lukea virheviestiä, mikä vaikeuttaa sen etsimistä huomattavasti. On kuitenkin olemassa ovela temppu. Pitää laittaa href -linkkiin risuaita. Tässä tapauksessa linkin siirtymistä ei tapahdu ja näemme konsoliin heitetyn virheen:

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