JavaScriptda havola bo'yicha o'tish xatosi

Keling, kutilmagan havola bo'yicha o'tish bilan bog'liq xatoni ko'rib chiqaylik. Misol uchun quyidagi havola berilgan bo'lsin:

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

Havolamizni o'zgaruvchiga olaylik:

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

Havolamizga click hodisasi uchun ishlovchini bog'laymiz:

havola.addEventListener('click', function() {
	console.log(this.textContent);
});

Va mana bu erda bizni kutilmagan holat kutmoqda. Kod to'g'ri yozilgan, ammo, konsolda chiqish paydo bo'lmaydi. Muammo shundaki, click paytida havola bo'yicha o'tish amalga oshadi. href atributida hech narsa ko'rsatilmaganligi sababli, havola shunchaki joriy sahifaga yo'naltiradi.

Bu shuni anglatadiki, havolani bosish sahifaning qayta yuklanishiga olib keladi. Ya'ni bizning ma'lumotlarimiz konsolda chiqadi, keyin sahifa qayta yuklanadi, va konsol bo'sh bo'lib qoladi.

Agar diqqat bilan kuzatilsa, click paytida ma'lumotlar konsolda bir lahzada paydo bo'lishi, keyin yo'qolishi ko'rinadi. Bu aynan ushbu xatoning xarakterli belgisidir.

Keling, ushbu muammoni qanday hal qilish mumkinligini ko'rib chiqaylik.

Birinchi yechim

href havolasiga panjara belgisini (#) qo'yish kerak. Bu shunday natijaga olib keladiki, havola joriy sahifaning ma'lum joyiga ishora qiladi va click paytida sahifa qayta yuklanmaydi. Buni amalga oshiramiz:

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

Ikkinchi yechim

Yanada rivojlangan usul - preventDefault metodi yordamida standart harakatni bekor qilishdir:

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