Kļūda ar aizliegtas saites klikšķi JavaScript

Pieņemsim, ka mums ir šāda saite:

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

Iegūstam mūsu saiti mainīgajā:

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

Piesaistīsim mūsu saitei klikšķa notikuma apstrādātāju. Tajā pašā laikā atcelsim navigāciju pa saiti, lai izvairītos no lapas pārlādes:

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

Varētu šķist, ka esam sevi pilnībā pasargājuši no negaidītas darbības. Patiesībā tā nav. Lieta ir tāda, ka rodoties sintakses kļūdai JavaScript kods vienkārši netiks izpildīts, saites bloķēšana nedarbosies, un tiks veikta navigācija uz to.

Šajā gadījumā mēs neredzēsim ne izpildes rezultātu, ne kļūdu konsolē, jo lapa tiks pārlādēta. Izveidosim tīši kļūdu kodā un pārliecināsimies praksē:

link.addEventListener('click', function(event) {
	thiss.textContent = 'text'; // sintakses kļūda
	event.preventDefault();
});

Šai problēmai ir raksturīga pazīme: ja paskatās konsolē saites klikšķa mirklī, mēs uz mirkli ieraudzīsim sarkano kļūdu konsolē, kas gandrīz uzreiz pazudīs.

Protams, mēs nespēsim izlasīt kļūdas tekstu, kas ievērojami apgrūtina tās meklēšanu. Tomēr ir viltīgs paņēmiens. Jāieliek saites href atribūtā režģa zīmi (#). Šajā gadījumā navigācija pa saiti nenotiks un mēs ieraudzīsim izmesto kļūdu konsolē:

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