JavaScript-da havola o‘tish taqiqlash xatosi

Faraz qilaylik, bizda havola bor:

<a href="">havola</a>

Havolani o‘zgaruvchiga olaylik:

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

Havolamizga click hodisasi ushlab qoluvchisini bog‘laymiz. Bunda sahifa qayta yuklanishining oldini olish uchun havola orqali o‘tishni bekor qilamiz:

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

Biz o‘zimizni kutilmagan xatti-harakatlardan butunlay himoyalagandek tuyuladi. Aslida bu shunday emas. Gap shundaki, sintaktik xatolik yuz berganda JavaScript kodi bajarilmaydi, havolani bloklash ishlamaydi va uning orqali o‘tish amalga oshiriladi.

Bunday holda biz na kod bajarilish natijasini, na konsoldagi xatoni ko‘ramiz, chunki sahifa qayta yuklanadi. Keling, ataylab kodda xatolik yarataylik va amalda ishonch hosil qilaylik:

link.addEventListener('click', function(event) {
	thiss.textContent = 'matn'; // sintaktik xatolik
	event.preventDefault();
});

Bunday muammoning o‘ziga xos belgisi bor: agar havolani bosish paytida konsolga qarasak, biz konsolda miltillab ko‘ringan qizil xatoni ko‘ramiz, u deyarli darhol yo‘qoladi.

Albatta, xato matnini o‘qishga vaqtimiz yetmaydi, bu uni qidirishni sezilarli darajada qiyinlashtiradi. Ammo, bir ayyor usul bor. Havolaning href atributiga panjara (#) belgisini qo‘yish kerak. Bunda havola orqali o‘tish bo‘lmaydi va biz konsolga tashlangan xatoni ko‘ramiz:

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