javascript - event.preventDefault()बनाम वापसी झूठी




jquery javascript-events event-handling event-propagation (11)

जब मैं किसी निश्चित घटना के बाद अन्य ईवेंट हैंडलर को निष्पादित करने से रोकना चाहता हूं, तो मैं दो तकनीकों में से एक का उपयोग कर सकता हूं। मैं उदाहरणों में jQuery का उपयोग करूंगा, लेकिन यह सादा-जेएस पर भी लागू होता है:

1. event.preventDefault() 

$('a').click(function (e) {
    // custom handling here
    e.preventDefault();
});

2. return false 

$('a').click(function () {
    // custom handling here
    return false;
});

घटना प्रसार को रोकने के उन दो तरीकों के बीच कोई महत्वपूर्ण अंतर है?

मेरे लिए, return false; एक विधि निष्पादित करने से सरल, कम और शायद कम त्रुटि प्रवण है। विधि के साथ, आपको सही आवरण, कोष्ठक आदि के बारे में याद रखना होगा।

साथ ही, मुझे विधि कॉल करने में सक्षम होने के लिए कॉलबैक में पहला पैरामीटर परिभाषित करना होगा। शायद, कुछ कारण हैं कि मुझे ऐसा करने से क्यों बचना चाहिए और इसके बजाय preventDefault उपयोग करना चाहिए? बेहतर तरीका क्या है?

Answers

e.preventDefault ();

यह बस एक तत्व की डिफ़ॉल्ट कार्रवाई को रोकता है।

इंस्टेंस एक्स :-

URL का पालन करने से हाइपरलिंक को रोकता है, सबमिट सबमिट करने के लिए सबमिट बटन को रोकता है। जब आपके पास कई ईवेंट हैंडलर होते हैं और आप केवल डिफ़ॉल्ट ईवेंट को होने से रोकना चाहते हैं, और कई बार ऐसा करना चाहते हैं, इसके लिए हमें फ़ंक्शन () के शीर्ष में उपयोग करने की आवश्यकता है।

कारण:-

e.preventDefault(); का उपयोग करने का कारण e.preventDefault(); यह है कि हमारे कोड में कोड में कुछ गलत हो जाता है, फिर यह सबमिट करने के लिए लिंक या फॉर्म निष्पादित करने की अनुमति देगा या निष्पादित करने की अनुमति देगा या आपको जो भी कार्रवाई करने की आवश्यकता है उसे अनुमति दें। लिंक या सबमिट बटन सबमिट हो जाएगा और अभी भी घटना के आगे प्रसार की अनुमति देगा। 

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <a href="https://www.google.com" onclick="doSomethingElse()">Preventsss page from redirect</a>
      <script type="text/javascript">
         function doSomethingElse(){
           console.log("This is Test...");
         }
         $("a").click(function(e){
          e.preventDefault(); 
         });
      </script>
   </body>
</html>

विवरण झूठा है;

यह बस फ़ंक्शन () के निष्पादन को रोकता है।

" return false; " प्रक्रिया के पूरे निष्पादन को खत्म कर देगा।

कारण:-

वापसी झूठी उपयोग करने का कारण; यह है कि आप कड़ाई से मोड में फ़ंक्शन निष्पादित नहीं करना चाहते हैं। 

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <a href="#" onclick="returnFalse();">Blah</a>
      <script type="text/javascript">
         function returnFalse(){
         console.log("returns false without location redirection....")
             return false;
             location.href = "http://www.google.com/";
         
         }
      </script>
   </body>
</html>

मेरे अनुभव से, वापसी झूठी का उपयोग करते हुए event.preventDefault () का उपयोग करते समय कम-से-कम एक स्पष्ट लाभ होता है। मान लें कि आप एक एंकर टैग पर क्लिक इवेंट कैप्चर कर रहे हैं, अन्यथा यदि उपयोगकर्ता को वर्तमान पृष्ठ से नेविगेट किया जाना है तो यह एक बड़ी समस्या होगी। यदि आपका क्लिक हैंडलर ब्राउज़र नेविगेशन को रोकने के लिए झूठी झूठी उपयोग करता है, तो यह संभावना खुलती है कि दुभाषिया रिटर्न स्टेटमेंट तक नहीं पहुंच पाएगा और ब्राउज़र एंकर टैग के डिफ़ॉल्ट व्यवहार को निष्पादित करने के लिए आगे बढ़ेगा। 

$('a').click(function (e) {
  // custom handling here

  // oops...runtime error...where oh where will the href take me?

  return false;
});

Event.preventDefault () का उपयोग करने का लाभ यह है कि आप इसे हैंडलर में पहली पंक्ति के रूप में जोड़ सकते हैं, इस प्रकार यह गारंटी दे रहा है कि एंकर का डिफ़ॉल्ट व्यवहार आग नहीं लगेगा, भले ही फ़ंक्शन की अंतिम पंक्ति तक न पहुंच जाए (उदाहरण के लिए रनटाइम त्रुटि )। 

$('a').click(function (e) {
  e.preventDefault();

  // custom handling here

  // oops...runtime error, but at least the user isn't navigated away.
});

असल में, इस तरह आप चीजों को गठबंधन करते हैं क्योंकि jQuery एक ढांचा है जो ज्यादातर HTML तत्वों पर केंद्रित होता है, आप मूल रूप से डिफ़ॉल्ट को रोकते हैं, लेकिन साथ ही, आप बबल करने के प्रचार को रोकते हैं।

तो हम बस कह सकते हैं, jQuery में झूठी वापसी बराबर है:

वापसी झूठी e.preventDefault और e.stopPropagation है

लेकिन यह भी भूलें कि यह jQuery या DOM से संबंधित कार्यों में है, जब आप इसे तत्व पर चलाते हैं, मूल रूप से, यह सब कुछ फायरिंग से रोकता है जिसमें डिफ़ॉल्ट व्यवहार और घटना का प्रचार शामिल है।

मूल रूप से return false; उपयोग शुरू करने से पहले return false; , पहले समझें कि e.preventDefault(); और e.stopPropagation(); ऐसा करें, तो अगर आपको लगता है कि आपको एक ही समय में दोनों की जरूरत है, तो बस इसका इस्तेमाल करें।

तो मूल रूप से नीचे यह कोड: 

$('div').click(function () {
  return false;
});

इस कोड के बराबर है: 

$('div').click(function (event) {
  event.preventDefault();
  event.stopPropagation();
});

आम तौर पर, आपका पहला विकल्प ( preventDefault() ) लेने वाला है, लेकिन आपको यह जानना होगा कि आप किस संदर्भ में हैं और आपके लक्ष्य क्या हैं।

ईंधन आपके कोडिंग में return false; पर एक महान लेख है return false; बनाम event.preventDefault() बनाम event.stopPropagation() बनाम event.stopImmediatePropagation() ।

नोट: उपरोक्त ईंधन आपका कोडिंग लिंक काफी समय से 5xx त्रुटियों का उत्पादन कर रहा है। मुझे इंटरनेट आर्काइव में इसकी प्रतिलिपि मिली है, इसे पीडीएफ में मुद्रित किया गया है, और इसे ड्रॉपबॉक्स में रखा गया है: return false; संग्रहीत लेख return false; बनाम event.preventDefault() बनाम event.stopPropagation() बनाम event.stopImmediatePropagation() (पीडीएफ)

return false और event.preventDefault() बीच मुख्य अंतर यह है कि नीचे दिए गए आपके कोड को return false नहीं किया जाएगा और event.preventDefault() मामले में आपका कोड इस कथन के बाद निष्पादित होगा।

जब आप झूठी वापसी लिखते हैं तो यह दृश्यों के पीछे आपके लिए निम्नलिखित चीजें करता है। 

* Stops callback execution and returns immediately when called.
* event.stopPropagation();
* event.preventDefault();

आप एक तत्व के लिए onClick ईवेंट पर बहुत सारे फ़ंक्शन लटका सकते हैं। आप कैसे सुनिश्चित कर सकते हैं कि false आग लगाने वाला आखिरी व्यक्ति होगा? दूसरी ओर रोकें डिफॉल्ट निश्चित रूप से तत्व के डिफ़ॉल्ट व्यवहार को रोक देगा।

JQuery का उपयोग करते समय, return false 3 अलग-अलग चीजें कर रही है जब आप इसे कॉल करते हैं:

  1. event.preventDefault();
  2. event.stopPropagation();
  3. कॉलबैक निष्पादन रोकता है और कॉल करते समय तुरंत लौटाता है।

JQuery घटनाक्रम देखें : अधिक जानकारी और उदाहरणों के लिए रिटर्न गलत का उपयोग करके रोकें (गलत) ।

ऐसा नहीं है, जैसा कि आपने इसे शीर्षक दिया है, एक "जावास्क्रिप्ट" प्रश्न; यह jQuery के डिजाइन के बारे में एक सवाल है।

jQuery और जॉन रेसिग से पहले जुड़े हुए उद्धरण ( karim79's message ) सामान्य कार्य में ईवेंट हैंडलर के बारे में स्रोत गलतफहमी प्रतीत होता है।

तथ्य: एक ईवेंट हैंडलर जो झूठी रिटर्न देता है उस घटना के लिए डिफ़ॉल्ट कार्रवाई को रोकता है। यह घटना प्रसार को रोकता नहीं है। नेटस्केप नेविगेटर के पुराने दिनों से इवेंट हैंडलर हमेशा इस तरह से काम करते रहे हैं।

एमडीएन के दस्तावेज बताते हैं कि एक ईवेंट हैंडलर में कैसे return false

JQuery में क्या होता है, ईवेंट ईवेंटर्स के साथ क्या होता है उतना ही नहीं होता है। डोम इवेंट श्रोताओं और एमएसआईई "संलग्न" घटनाएं एक अलग मामला पूरी तरह से हैं।

आगे पढ़ने के लिए, एमएसडीएन और डब्ल्यू 3 सी डोम 2 घटनाक्रम दस्तावेज पर attachEvent देखें।

एक jQuery इवेंट हैंडलर के भीतर से return false प्रभावी रूप से उत्तीर्ण jQuery.Event ऑब्जेक्ट पर e.preventDefault और e.preventDefault दोनों को कॉल करने जैसा ही है ।

e.preventDefault() डिफ़ॉल्ट घटना को होने से रोक देगा, e.preventDefault() घटना को e.preventDefault() से रोक देगा और return false दोनों करेगा। ध्यान दें कि यह व्यवहार सामान्य (गैर-jQuery) ईवेंट हैंडलर से अलग है, जिसमें विशेष रूप से, return false घटना को बुलबुले से रोक नहीं देती है ।

स्रोत: जॉन रेजिग

Href क्लिक को रद्द करने के लिए "वापसी झूठी" पर event.preventDefault () का उपयोग करने के लिए कोई लाभ?

मुझे लगता है कि ऐसा करने का सबसे अच्छा तरीका event.preventDefault() का उपयोग event.preventDefault() क्योंकि यदि हैंडलर में कुछ अपवाद उठाया जाता है, तो वापसी false कथन छोड़ दी जाएगी और व्यवहार आप जो चाहते हैं उसके विपरीत होगा।

लेकिन यदि आप सुनिश्चित हैं कि कोड किसी भी अपवाद को ट्रिगर नहीं करेगा, तो आप अपनी इच्छित विधि के साथ जा सकते हैं।

यदि आप अभी भी false वापसी के साथ जाना चाहते हैं, तो आप नीचे अपना जैसे हैंडल ब्लॉक में अपना पूरा हैंडलर कोड डाल सकते हैं: 

$('a').click(function (e) {
  try{
      your code here.........
  }
   catch(e){}
  return false;
});

PreventDefault, stopPropogation के बीच अंतर, झूठी वापसी

डिफ़ॉल्ट क्रिया - जब नियंत्रण घटना बढ़ती है तो सर्वर साइड एक्शन।

मान लें कि हमारे पास div नियंत्रण है और इसके अंदर हमारे पास एक बटन है। तो div बटन का मूल नियंत्रण है। हमारे पास क्लाइंट साइड क्लिक और सर्वर साइड बटन की घटना पर क्लिक करें। इसके अलावा हमारे पास div की क्लाइंट साइड क्लिक इवेंट है।

क्लाइंट साइड पर बटन की क्लिक इवेंट पर, हम निम्नलिखित तीन तरीकों से पेरेंट कंट्रोल और सर्वर साइड कोड के कार्यों को नियंत्रित कर सकते हैं:

  • return false - यह केवल नियंत्रण के क्लाइंट साइड इवेंट की अनुमति देता है। सर्वर साइड इवेंट और पैरेंट कंट्रोल के क्लाइंट साइड इवेंट को निकाल दिया नहीं जाता है।

  • preventDefault() - यह क्लाइंट साइड इवेंट नियंत्रण और उसके अभिभावक नियंत्रण की अनुमति देता है। सर्वर साइड इवेंट यानी। नियंत्रण की डिफ़ॉल्ट कार्रवाई को निकाल दिया नहीं जाता है।

  • stopPropogation() - यह क्लाइंट साइड के साथ-साथ नियंत्रण के सर्वर साइड इवेंट की अनुमति देता है। नियंत्रण की ग्राहक पक्ष घटना की अनुमति नहीं है।




javascript   jquery   javascript-events   event-handling   event-propagation  

javascript jquery javascript-events event-handling event-propagation