ბმულზე გადასვლის შეცდომა JavaScript-ში

გავაანალიზოთ შეცდომა, რომელიც დაკავშირებულია მოულოდნელ გადასვლასთან ბმულზე. მაგალითად, მოცემულია შემდეგი ბმული:

<a href="">ბმული</a>

მივიღოთ ჩვენი ბმული ცვლადში:

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

მივაბათ ჩვენს ბმულს დაწკაპუნების დამმუშავებელი:

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

და აი აქ გველოდება სიურპრიზი. კოდი დაწერილია სწორად, თუმცა, კონსოლში გამოტანა არ ჩნდება. საქმე იმაშია, რომ დაწკაპუნებისას ხდება გადასვლა ბმულზე. ვინაიდან ატრიბუტ href-ში არაფერია მითითებული, ბმული უბრალოდ მიუთითებს მიმდინარე გვერდზე.

ეს ნიშნავს, რომ ბმულზე დაწკაპუნება იწვევს გვერდის გადატვირთვას. ანუ ჩვენი მონაცემები გამოიტანება კონსოლში, შემდეგ გვერდი გადატვირთავს, და კონსოლი ცარიელი ხდება.

თუ ყურადღებით დავაკვირდებით, მაშინ შეგვიძლია დავინახოთ, თუ როგორ ჩნდება დაწკაპუნების მომენტში მონაცემები კონსოლში წამის მეასედის განმავლობაში, და შემდეგ ქრება. ეს არის სწორედ ამ შეცდომის დამახასიათებელი ნიშანი.

მოდით ვნახოთ, როგორ შეგვიძლია ამ პრობლემის მოგვარება.

ამოხსნა პირველი

ბმულის href-ში უნდა დავსვათ რეშეტკა (#). ეს გამოიწვევს იმას, რომ ბმული მიუთითებს მიმდინარე გვერდის კონკრეტულ ადგილას და ბმულზე დაწკაპუნებისას გადატვირთვა არ მოხდება. გავაკეთოთ ეს:

<a href="#">ბმული</a>

ამოხსნა მეორე

უფრო მოწინავე გზაა ქმედების გაუქმება სტანდარტულიდან მეთოდის გამოყენებით preventDefault:

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