JavaScript'te Bağlantı Engelleme Hatası

Diyelim ki bir bağlantımız var:

<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 olay işleyicisi ekleyelim. Sayfanın yeniden yüklenmesini önlemek için bağlantıya geçişi iptal edelim:

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

Kendimizi beklenmeyen davranışlardan tamamen korumuş gibi görünebiliriz. Aslında durum böyle değil. Olay şu ki, bir sözdizimi hatası oluştuğunda JavaScript kodu çalıştırılmaz, bağlantı engelleme işe yaramaz ve bağlantıya geçiş gerçekleşir.

Bu durumda, ne kodun çalıştırılmasının sonucunu ne de konsoldaki hatayı göremeyiz, çünkü sayfa yeniden yüklenir. Kasta koddaki bir hatayı oluşturalım ve pratikte görelim:

link.addEventListener('click', function(event) {
	thiss.textContent = 'text'; // sözdizimi hatası
	event.preventDefault();
});

Böyle bir sorunun karakteristik bir işareti vardır: bağlantıya tıklama anında konsola bakarsak, konsolda kırmızı hatayı anlık olarak görürüz, bu neredeyse anında kaybolur.

Elbette, hata mesajını okumak için zamanımız olmaz, bu da onu bulmayı önemli ölçüde zorlaştırır. Ancak, zekice bir yöntem var. Bağlantının href'ine bir kare işareti (#) koymak gerekir. Bu durumda bağlantıya geçiş gerçekleşmez ve konsola fırlatılan hatayı görürüz:

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