event.preventDefault() vs return false: अपने JavaScript को कैसे न तोड़ें

शुरुआती लोगों के लिए ऑनलाइन Python प्रशिक्षक

Python आसानी से सीखें बिना सिद्धांत के बोझ के। स्वचालित जांच के साथ व्यावहारिक कार्य हल करें और ब्राउज़र में सीधे कोड लिखें।

पाठ्यक्रम शुरू करें

परिचय: यह टॉपिक Stack Overflow पर क्यों धमाल मचाता है?

\n\n

अगर आपने कभी JavaScript में किसी लिंक पर क्लिक करने या फॉर्म सबमिट करने का हैंडलर लिखा है, तो आपने ज़रूर ऐसी स्थिति देखी होगी जहाँ ब्राउज़र आपकी लॉजिक को अनदेखा करके अपने आप कुछ करता है। आप लिंक पर क्लिक करने पर alert('नमस्ते!') लिखते हैं, लेकिन ब्राउज़र ज़िद करके दूसरे पेज पर चला जाता है। परिचित लग रहा है?

\n\n

यहीं पर दो महान तरीके आते हैं: event.preventDefault() और return false। सवाल "क्या चुनें?" Stack Overflow पर सबसे लोकप्रिय सवालों में से एक है, जिसे हज़ारों बार देखा गया है। और यह सही भी है: इन दोनों के बीच का अंतर बहुत महत्वपूर्ण है, और गलत चुनाव करने से मुश्किल से पकड़ में आने वाली बग्स हो सकती हैं।

\n\n

इस लेख में हम एक बार और हमेशा के लिए समझेंगे:

ब्राउज़र में "डिफ़ॉल्ट एक्शन" क्या होता है
दोनों तरीके कैसे काम करते हैं
मुख्य अंतर जिसने हज़ारों डेवलपर्स का कोड तोड़ा
प्रत्येक का उपयोग कब करें
return false हमेशा बुरा क्यों नहीं है

\n\n

तैयार हैं? चलिए शुरू करते हैं!

\n\n

1. "डिफ़ॉल्ट एक्शन" क्या है?

\n\n

इन तरीकों के बारे में बात करने से पहले, आइए समझें कि हम क्या रोक रहे हैं। ब्राउज़र एक स्मार्ट मशीन है जिसमें कई HTML एलिमेंट्स के लिए पहले से व्यवहार मौजूद है:

\n\n

लिंक (<a>): डिफ़ॉल्ट रूप से href एट्रीब्यूट में दिए गए पते पर चला जाता है।
फॉर्म (<form>): डिफ़ॉल्ट रूप से डेटा सर्वर पर भेजता है और पेज को रीलोड करता है।
सबमिट बटन (<input type="submit">): फॉर्म सबमिट करता है।
कॉन्टेक्स्ट मेनू (राइट क्लिक): ब्राउज़र का मेनू दिखाता है।

\n\n

कभी-कभी हमें इस व्यवहार की ज़रूरत होती है — जैसे जब उपयोगकर्ता वास्तव में किसी लिंक पर जाना चाहता है। लेकिन अक्सर हम इस क्रिया को रोकना चाहते हैं और अपनी लॉजिक चलाना चाहते हैं: फॉर्म भेजने से पहले उसे जाँचना, लिंक को मोडल विंडो में खोलना, या कस्टम कॉन्टेक्स्ट मेनू दिखाना।

\n\n

यही काम हमारे ये दो नायक करते हैं।

\n\n

2. event.preventDefault() — सभ्य तरीका

\n\n

यह इवेंट ऑब्जेक्ट (event) का एक तरीका है। यह सिर्फ एक काम करता है: ब्राउज़र के डिफ़ॉल्ट एक्शन को रद्द करना।

\n\n

// उदाहरण 1: लिंक पर जाने से रोकना\ndocument.querySelector('a').addEventListener('click', function(event) {\n    event.preventDefault();\n    alert('लिंक काम नहीं करेगा! मैंने इसे रोक दिया।');\n});\n\n// उदाहरण 2: फॉर्म सबमिट होने से रोकना\ndocument.querySelector('form').addEventListener('submit', function(event) {\n    event.preventDefault();\n    // अब फॉर्म पेज को रीलोड नहीं करेगा\n    // AJAX रिक्वेस्ट या वैलिडेशन कर सकते हैं\n    console.log('फॉर्म सबमिट नहीं हुआ। डेटा जाँच रहे हैं...');\n});\n

\n\n

ध्यान दें: preventDefault() इवेंट के बबलिंग को नहीं रोकता। अगर आपके पास नेस्टेड हैंडलर हैं, तो इवेंट DOM ट्री में ऊपर की ओर "बबल" करता रहेगा।

\n\n

यह समझना ज़रूरी है: अगर आप डिफ़ॉल्ट एक्शन को रोकने के साथ-साथ बबलिंग भी रोकना चाहते हैं, तो आपको दोनों तरीकों को कॉल करना होगा: preventDefault() और stopPropagation()।

\n\n

3. return false — पुराना लेकिन खतरनाक दोस्त

\n\n

अब return false — यह थोड़ा पेचीदा है। यह पूरी तरह से इस बात पर निर्भर करता है कि आप हैंडलर कैसे जोड़ रहे हैं।

\n\n

केस 1: HTML एट्रीब्यूट्स (onclick)

पुराने ज़माने में (और आज भी पुराने कोड में) हैंडलर सीधे HTML में लगाए जाते थे:

\n\n

<a href="https://example.com" onclick="return false;">मुझ पर क्लिक करें</a>\n\n<form onsubmit="return validateForm();">\n    <input type="submit" value="भेजें">\n</form>\n\n<script>\nfunction validateForm() {\n    // अगर false लौटाया — फॉर्म सबमिट नहीं होगा\n    // अगर true लौटाया — सबमिट होगा\n    return false;\n}\n</script>\n

\n\n

इस