Kļūda, noklikšķinot uz saites JavaScript

Apskatīsim kļūdu, kas saistīta ar negaidītu navigāciju uz citu lapu, noklikšķinot uz saites. Piemēram, ir dota šāda saites:

<a href="">saites</a>

Iegūstam mūsu saiti mainīgajā:

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

Pievienosim mūsu saitei klikšķa notikumu apstrādi:

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

Un šeit mūs sagaida pārsteigums. Kods ir uzrakstīts pareizi, tomēr, konsolē nekas neparādās. Lieta tāda, ka, noklikšķinot, notiek navigācija uz citu lapu. Tā kā atribūtā href nekas nav norādīts, tad saite vienkārši ved uz pašreizējo lapu.

Tas nozīmē, ka klikšķis uz saites izraisa lappuses pārlādi. Tas ir, mūsu dati tiek izvadīti konsolē, tad lapa tiek pārlādēta, un konsole kļūst tukša.

Ja rūpīgi ieskatās, tad var redzēt, ka klikšķa brīdī dati uz mirkli parādās konsolē, un tad pazūd. Tas ir raksturīga šīs kļūdas pazīme.

Apskatīsim, kā šo problēmu var atrisināt.

Pirmais risinājums

href saitē jāieliek režģītis (#). Tas novedīs pie tā, ka saites norādīs uz konkrētu pašreizējās lapas vietu un, noklikšķinot uz saites, pārlādes nebūs. Izdarīsim to:

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

Otrais risinājums

Vairāk progresīvs veids ir atcelt noklusējuma darbību izmantojot metodi preventDefault:

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