JavaScript-ում հղման անսպասելի անցման սխալ

Եկեք վերլուծենք հղման անսպասելի անցման հետ կապված սխալը: Որպես օրինակ, բերենք հետևյալ հղումը.

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

Ստացնենք մեր հղումը փոփոխականի մեջ.

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

Կապենք մեր հղմանը կլիկի դիտարկիչ.

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

Եվ ահա մեզ անակնկալ է սպասվում: Կոդը գրված է ճիշտ, սակայն, կոնսոլում տպագրությունը չի երևում: Բանը նրանում է, որ կլիկի դեպքում տեղի է ունենում անցում հղմանով: Քանի որ href ատրիբուտում ոչինչ նշված չէ, ապա հղումը պարզապես ուղղորդում է ընթացիկ էջ:

Սա նշանակում է, որ հղման վրա կլիկը հանգեցնում է էջի վերաբեռնման: Այսինքն մեր տվյալները տպվում են կոնսոլում, ապա էջը վերաբեռնվում է, և կոնսոլը դատարկվում է:

Եթե ուշադիր դիտել, ապա կարելի է տեսնել, թե ինչպես կլիկի պահին տվյալները ակնթարթորեն հայտնվում են կոնսոլում, ապա անհետանում են: Սա հենց այս սխալի բնորոշ նշանն է:

Եկեք տեսնենք, թե ինչպես կարելի է լուծել այս խնդիրը:

Առաջին լուծում

Հղման href-ում պետք է դնել ռեշետկա: Սա կհանգեցնի նրան, որ հղումը կուղղորդի դեպի ընթացիկ էջի կոնկրետ հատված և կլիկի դեպքում վերաբեռնում տեղի չի ունենա: Եկեք անենք դա.

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

Երկրորդ լուծում

Ավելի առաջադեմ եղանակ է լռելյայն գործողության վերացումը preventDefault մեթոդի օգնությամբ.

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