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

मान लीजिए कि हमारे पास एक लिंक है:

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

लिंक को एक वेरिएबल में प्राप्त करें:

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

लिंक पर एक क्लिक इवेंट हैंडलर बांधें। पेज रीलोड होने से बचने के लिए लिंक पर ट्रांजिशन को रद्द कर दें:

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

ऐसा लगता है कि हमने अपने आप को अप्रत्याशित व्यवहार से पूरी तरह सुरक्षित कर लिया है। असल में ऐसा नहीं है। बात यह है कि सिंटैक्स त्रुटि होने पर जावास्क्रिप्ट कोड बिल्कुल भी निष्पादित नहीं होगा, लिंक ब्लॉक नहीं होगा, और उस पर ट्रांजिशन हो जाएगा।

इस स्थिति में, हम न तो कोड निष्पादन का परिणाम देखेंगे, न ही कंसोल में कोई त्रुटि, क्योंकि पेज रीलोड हो जाएगा। आइए जानबूझकर कोड में एक त्रुटि करें और व्यवहार में देखें:

link.addEventListener('click', function(event) {
	thiss.textContent = 'text'; // सिंटैक्स त्रुटि
	event.preventDefault();
});

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

निस्संदेह, हम त्रुटि का टेक्स्ट पढ़ने में सफल नहीं होंगे, जिससे इसे ढूंढना काफी मुश्किल हो जाता है। हालांकि, एक चालाक तरीका है। लिंक के href में हैश (#) लगाना होगा। इस स्थिति में लिंक पर ट्रांजिशन नहीं होगा और हम कंसोल में फेंकी गई त्रुटि देख पाएंगे:

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