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

დავუშვათ, გვაქვს ბმული:

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

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

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

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

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

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

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

link.addEventListener('click', function(event) {
	thiss.textContent = 'text'; // სინტაქსური შეცდომა
	event.preventDefault();
});

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

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

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