JavaScript'te Bağlantı Tıklama Hatası

Beklenmeyen bağlantı tıklama hatasıyla ilgili bir hatayı inceleyelim. Örnek olarak aşağıdaki bağlantıyı verelim:

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

Bağlantımızı bir değişkene alalım:

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

Bağlantımıza bir tıklama işleyici ekleyelim:

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

Ve işte burada bizi bir sürpriz bekliyor. Kod doğru yazılmış, ancak konsolda çıktı görünmüyor. Sebebi şu ki, tıklandığında bağlantıya geçiş yapılır. href özniteliğinde hiçbir şey belirtilmediği için, bağlantı sadece mevcut sayfaya yönlenir.

Bu, bağlantıya tıklandığında sayfanın yeniden yüklendiği anlamına gelir. Yani verilerimiz konsola yazdırılır, ardından sayfa yeniden yüklenir ve konsol boşalır.

Dikkatlice bakarsak, tıklama anında verilerin konsolda bir anlığına görünüp sonra kaybolduğunu görebiliriz. Bu, bu hatanın karakteristik belirtisidir.

Şimdi bu sorunu nasıl çözebileceğimize bir bakalım.

Birinci Çözüm

Bağlantının href özniteliğine kare işareti (#) konulmalıdır. Bu, bağlantının mevcut sayfanın belirli bir yerine işaret etmesine ve tıklandığında yeniden yükleme olmamasına neden olur. Bunu yapalım:

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

İkinci Çözüm

Daha gelişmiş bir yöntem, preventDefault yöntemiyle varsayılan eylemi iptal etmektir:

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