JavaScript-da baglanyşyga geçiş ýalňyşlygy

Gözlenilmedik baglanyşyga geçiş bilen baglanyşykly ýalňyşlygy derňäliň. Mysal üçin aşakdaky baglanyşyk berlen:

<a href="">baglanyşyk</a>

Baglanyşygymyzy üýtgeýjide alyň:

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

Baglanyşygymyza basylyş işleýjisini baglaň:

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

We şu ýerde bizi göz goýar. Kod dogry ýazylandyr, ýöne konsolda çap edilmeýär. Sebäbi, basylanda baglanyşyga geçiş bolýar. href atrybutynda hiç zat görkezilmedigi üçin, baglanyşyk diňe häzirki sahypa ýollaryr.

Bu bolsa, baglanyşyga basmak sahypany täzeden ýüklemäge getirýär. Ýagny, maglumatlarymyz konsolda çap edilýär, soňra sahypa täzeden ýüklenilýär, we konsol boşalýar.

Eger diňlesen seretseňiz, onda görüp bolýar, basylyş wagty maglumatlar konsolda bir sany ýarym sekuntda peýda bolýar, soňra ýok bolýar. Bu bolsa bu ýalňyşlygyň aýratynlygy.

Bu meseläni nädip çözüp boljakdygyna serediň.

Birinji çözgüt

Baglanyşygyň href bölüminde reşetka goýulmaly. Bu bolsa, baglanyşygyň häzirki sahypanyň kesgitli ýerine ýollaryşyna we baglanyşyga basylanda täzeden ýüklemek bolmazlygyna getirer. Muny edeliň:

<a href="#">baglanyşyk</a>

Ikinji çözgüt

Has ösen usul, adaty hereketi preventDefault metody bilen ýatyrmakdyr:

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