JavaScript-də Linkə Klikləmə Xətası

Gəlin gözlənilməz link keçidi ilə bağlı xətanı təhlil edək. Nümunə olaraq aşağıdakı link verilsin:

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

Linki dəyişəndə əldə edək:

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

Linkimizə klik hadisəsi əlavə edək:

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

Və burada bizi sürpriz gözləyir. Kod düzgün yazılıb, lakin konsolda çıxış görünmür. Ona görə ki, klik zamanı linkə keçid baş verir. Çünki href atributunda heç nə göstərilməyib, link sadəcə cari səhifəyə keçid edir.

Bu o deməkdir ki, linkə klik etmək səhifənin yenidən yüklənməsinə səbəb olur. Yəni bizim məlumatlarımız konsola çıxarılır, sonra səhifə yenidən yüklənir, və konsol təmizlənir.

Diqqətlə baxsaq, konsolda məlumatların klik anında ani olaraq göründüyünü və sonra yox olduğunu görə bilərik. Bu da məhz bu xətanın xarakterik əlamətidir.

Gəlin bu problemi necə həll edə biləcəyimizə baxaq.

Birinci Həll

Linkin href hissəsinə reşetka (#) qoymaq lazımdır. Bu, linkin cari səhifənin müəyyən yerinə işarə etməsinə səbəb olacaq və linkə klik edəndə səhifə yenidən yüklənməyəcək. Gəlin bunu edək:

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

İkinci Həll

Daha inkişaf etmiş bir üsul, preventDefault metodu ilə standart hərəkətin ləğv edilməsidir:

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