यह आखिरी वीडियो में बहुत संक्षिप्त रूप से सामने आया: जब आप हैश लिंक पर क्लिक करते हैं तो आप ब्राउज़र को नीचे कूदने से कैसे रोकते हैं? यह डिफ़ॉल्ट ब्राउज़र व्यवहार है, और सौभाग्य से, जावास्क्रिप्ट के साथ, हम ब्राउज़र को ऐसा नहीं करने के लिए कह सकते हैं।
इसे संभालने का सबसे सरल तरीका है:
$("a").on("click", function(event) ( event.preventDefault(); ));आप देखेंगे कि ये लिंक नीचे नहीं कूदेंगे जैसे आप सोच सकते हैं:
पेन को देखें a5aea4890837ac172605983324d5470 पर क्रिस कॉयर (@chriscoyier) द्वारा CodePen
हालांकि इससे सावधान रहें। यह पेज को नीचे कूदने से एक हैश लिंक को रोक देगा, लेकिन यह एक सामान्य लिंक को नए URL पर जाने से भी रोक देगा। तो केवल एंकर लिंक पर इसका उपयोग करें जो आप जानते हैं कि आप विशेष रूप से अपने स्वयं के जावास्क्रिप्ट में संभालना चाहते हैं। आप चीजों को संकीर्ण कर सकते हैं जैसे $("a(href^='#')")। उदाहरण के लिए "लिंक की href विशेषता हैश से शुरू होती है।"
लेकिन अक्सर आप इसे भी देखेंगे:
$("a").on("click", function() ( return false; ));और वही काम पूरा करता है। यहां जो हो रहा है, return false;वह वास्तव में दो काम कर रहा है। यह कर रहा है event.preventDefault();और यह एक और काम कर रहा है:event.stopPropagation();
आप झूठे का उपयोग कर सकते हैं; यदि आप चाहें, तो आपको बस यह समझने की जरूरत है कि स्टॉपप्रॉपैजेशन क्या है और ऐसा करने से ठीक है। मुझे लगता है कि आम तौर पर यह सबसे अच्छा नहीं है जब तक कि आप यह नहीं जानते कि आप विशेष रूप से ऐसा करना चाहते हैं। यह जो करता है वह DOM ईवेंट के "बुदबुदाहट" को रोक देता है। उदाहरण के लिए यदि आप DOM इस तरह हैं:
- Home
- About
- Clients
- Contact Us
फिर आप "होम" शब्द पर स्क्वायर राइट क्लिक करें, एंकर लिंक पर क्लिक करने पर ईवेंट चालू हो जाएगा, फिर यह लिस्ट आइटम पर बबल जाएगा, फिर अनऑर्डर किए गए लिस्ट तक बबल करेगा, फिर नेवी एलिमेंट, सभी तरह से दस्तावेज़ को ही।
जब आप stopPropagation करते हैं, तो आप जिस भी तत्व की घटना को चलाते हैं, उस पर बुदबुदाती बंद हो जाएगी। बस जागरूक रहो!
मैंने यहाँ इस अंतर के बारे में और लिखा है।
वीडियो के अंत में मैं एक तत्व पर स्क्रॉलिंग को रोकने के बारे में बात करता हूं, जो कि StopDefault द्वारा। मैं पूरी तरह से गलत था कि आप ऐसा कर सकते हैं। यह सिर्फ इतना होता है कि एक घटना है कि आप उस तरह नहीं रोक सकते हैं। इसे रोकने के तरीके हैं जैसे सीएसएस ( overflow: hidden;- जो अजीब हो सकता है) का उपयोग कर - या बहुत फैंसी हो रहा है।