जावास्क्रिप्ट में लिंक पर क्लिक करने पर त्रुटि

आइए एक ऐसी त्रुटि का विश्लेषण करें जो लिंक पर अप्रत्याशित नेविगेशन से संबंधित है। उदाहरण के लिए, मान लीजिए कि निम्नलिखित लिंक दी गई है:

<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();
});