HI
RU
EN
ES
ZH
FR
DE
PT
AR
# या javascript:void(0): JavaScript लिंक्स के लिए क्या चुनें? कोड के साथ पूर्ण व्याख्या
\n\nनमस्ते, साथी डेवलपर! यदि आपने कभी ऐसी लिंक्स लिखी हैं जो किसी नए पेज पर नहीं ले जातीं, बल्कि JavaScript कोड चलाती हैं (जैसे मोडल विंडो खोलना, कंटेंट लोड करना या एनिमेशन चलाना), तो आपने निश्चित रूप से इस दुविधा का सामना किया होगा: href एट्रीब्यूट का कौन सा मान उपयोग करें? href="#" या href="javascript:void(0)"?
यह प्रश्न Stack Overflow पर एक वास्तविक हिट है (हजारों व्यूज़!), और यह व्यर्थ नहीं है। यह एक छोटी सी बात लगती है, लेकिन इस पर निर्भर करता है कि पेज कैसे व्यवहार करेगा: क्या यह ऊपर स्क्रॉल करेगा, क्या URL में हैश दिखाई देगा, क्या यह पुराने ब्राउज़रों में भी काम करेगा। आइए हमेशा के लिए समझ लें कि कौन सा तरीका बेहतर है, और क्यों 'सही' उत्तर इतना स्पष्ट नहीं है।
\n\nसमस्या: href को बदलने की आवश्यकता क्यों है?
\n\nकल्पना करें: आप एक बटन लिख रहे हैं जो मेनू खोलता है:
\n\n<a href="#" onclick="openMenu(); return false;">मेनू</a>या इस तरह:
\n\n<a href="javascript:void(0)" onclick="openMenu();">मेनू</a>दोनों विकल्प 'काम' करते हैं, लेकिन प्रत्येक में अपने आश्चर्य छिपे हैं। आइए उनकी तुलना प्रमुख मानदंडों पर करें।
\n\nविकल्प 1: href="#" — एक चाल के साथ क्लासिक
\n\n# पेज के 'शीर्ष' का लिंक है। यदि आप बस <a href="#"> लिखते हैं, तो ब्राउज़र पेज को ऊपर स्क्रॉल कर देगा। इससे बचने के लिए, हैंडलर में return false; जोड़ना होगा:
<a href="#" onclick="doSomething(); return false;">मुझे दबाएं</a>लाभ:
\n- \n
- पहुंच: लिंक फोकस करने योग्य रहता है (Tab से जा सकते हैं)। \n
- सिमैंटिक्स: स्क्रीन रीडर के लिए यह अभी भी एक लिंक है (हालांकि कहीं नहीं ले जाता)। \n
- सरलता: याद रखना आसान, जल्दी लिखा जा सकता है। \n
नुकसान:
\n- \n
- ऊपर स्क्रॉल करना: यदि
return falseभूल जाते हैं, तो उपयोगकर्ता अपनी स्थिति खो देगा। \n - URL में बदलाव: एड्रेस बार में
#जुड़ जाता है (कभी-कभी यह अवांछनीय होता है)। \n - ब्राउज़र इतिहास: इतिहास में एक प्रविष्टि बनती है ('पीछे' बटन पिछले '#'-पेज पर ले जाएगा)। \n
विकल्प 2: href="javascript:void(0)" — पुराने समय के लिए हैक
\n\njavascript:void(0) एक JavaScript स्यूडो-प्रोटोकॉल है। यह ब्राउज़र को कहता है: 'कोड void(0) चलाएं और लिंक पर न जाएं'। void(0) undefined लौटाता है, इसलिए पेज हिलता नहीं है।
<a href="javascript:void(0)" onclick="doSomething();">मुझे दबाएं</a>लाभ:
\n- \n
- पेज को स्क्रॉल नहीं करता — किसी
return falseकी आवश्यकता नहीं है। \n - URL नहीं बदलता — हैश नहीं जुड़ता। \n
नुकसान:
\n- \n
- पहुंच संबंधी समस्याएं: कुछ पुराने स्क्रीन रीडर href में
javascript:पर 'अटक' सकते हैं। \n - प्रगतिशील संवर्धन के सिद्धांतों का उल्लंघन: यदि उपयोगकर्ता के पास JavaScript अक्षम है, तो लिंक काम नहीं करता (खालीपन की ओर ले जाता है)। \n
- अमान्य HTML? औपचारिक रूप से
javascript:एक गैर-मानक प्रोटोकॉल है, लेकिन ब्राउज़र इसे समझते हैं। हालांकि, W3C वैलिडेटर शिकायत कर सकता है। \n - डीबग करना कठिन: यदि href में कोई त्रुटि है, तो ब्राउज़र अप्रत्याशित व्यवहार कर सकता है। \n
तालिका में तुलना
\n\n| मानदंड | \nhref="#"
|
|---|
