Eroare de interzicere a navigării prin link în JavaScript

Să presupunem că avem un link:

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

Să obținem linkul nostru într-o variabilă:

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

Să atașăm linkului nostru un handler de click. Vom anula navigarea prin link pentru a evita reîncărcarea pagina:

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

Pare că ne-am protejat complet împotriva comportamentului neașteptat. În realitate, nu este așa. Ideea este că atunci când apare o eroare de sintaxă, codul JavaScript pur și simplu nu va fi executat, blocarea linkului nu va funcționa și va avea loc navigarea prin el.

În acest caz, nu vom vedea nici rezultatul executării codului, nici eroarea în consolă, deoarece pagina se va reîncărca. Să facem în mod intenționat o eroare în cod și să ne convingem practic:

link.addEventListener('click', function(event) {
	thiss.textContent = 'text'; // eroare de sintaxă
	event.preventDefault();
});

Această problemă are un semn caracteristic: dacă ne uităm în consolă în momentul click-ului pe link, vom vedea pentru o clipă o eroare roșie în consolă, care aproape imediat va dispărea.

Desigur, nu vom avea timp să citim textul erorii, ceea ce face dificilă găsirea acesteia. Există, totuși, un truc viclean. Trebuie să punem un diez în href al linkului. În acest caz, navigarea prin link nu se va întâmpla și vom vedea eroarea aruncată în consolă:

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