event.preventDefault () बनाम गलत वापसी

Question

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

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इसके बजाय उपयोग करना चाहिए? बेहतर तरीका क्या है?

Comments

ध्यान दें कि jQuery के preventDefaultकरता नहीं क्रियान्वित करने से अन्य हाथ के बल्लेबाजों को रोकने के। इसके stopImmediatePropagationलिए जो है।

— वर्धमान ताजा

@CrescentFresh, यह अन्य (बाद में बाध्य) संचालकों को निष्पादित करने से रोकता है ... DOM नोड पर इस घटना को निकाल दिया जाता है। यह सिर्फ प्रचार को नहीं रोकता है।

— पलकविहीनता

ये "प्रचार प्रसार को रोकने के दो तरीके" नहीं हैं? e.preventDefault (); डिफ़ॉल्ट क्रिया को रोकता है, यह ईवेंट के प्रसार को नहीं रोकता है, जो e.stopPropagation () द्वारा किया जाता है।

— टिमो तिजहोफ

यह सवाल और इसके उत्तर jQuery के बारे में हैं। यदि आप एक सादे जावास्क्रिप्ट उत्तर की तलाश में यहाँ आए थे, तो event.preventDefault () बनाम रिटर्न असत्य (कोई jQuery) नहीं देखें

— Oriol

इस उत्तर में एक तालिका है जिसमें यह बताया गया है कि सभी stackoverflow.com/a/5302939/759452

— Adrien Be

Answer 1

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

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

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

इवेंट का उपयोग करने का कोई लाभ। Hvent क्लिक को रद्द करने के लिए "return असत्य" पर।

Comments

return falseDOM2 हैंडलर ( addEventListener) से कुछ भी नहीं होता (न तो डिफ़ॉल्ट को रोकता है और न ही बबल को रोकता है; Microsoft DOM2-ish हैंडलर से attachEvent), यह डिफ़ॉल्ट को रोकता है, लेकिन बबल को नहीं रोकता है; DOM0 हैंडलर से onclick="return ..."), यह डिफ़ॉल्ट को रोकता है (प्रदान की गई) आप returnविशेषता में शामिल हैं ) लेकिन बुदबुदाती नहीं, एक jQuery इवेंट हैंडलर से, यह दोनों करता है, क्योंकि यह एक jQuery की बात है। विवरण और लाइव परीक्षण यहां

— TJ Crowder

यहां "प्रचार" और "डिफ़ॉल्ट" को परिभाषित करना उपयोगी होगा। मैं एक के लिए उन्हें भ्रमित करता रहता हूं। क्या ये सही है? प्रचार = मेरा कोड (मूल तत्वों के लिए जावास्क्रिप्ट घटना संचालकों)। डिफ़ॉल्ट = ब्राउज़र कोड (लिंक, पाठ चयन, आदि)

— बॉब स्टेन

बुदबुदाहट से वास्तव में क्या मतलब है? उदाहरण?

— गोविंदा सखारे

यह देखते हुए कि के लिए +1 return falseकरता नहीं गैर jQuery ईवेंट हैंडलर्स में घटना प्रचार बंद करो। यानी <a href="#" onclick="return false">Test</a>करता नहीं खलबली मचाने वाले से घटना को रोकने के।

— डग एस

Answer 2

मेरे अनुभव से, कम से कम एक स्पष्ट लाभ है जब ईवेंट का उपयोग करें ।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.
});

Comments

जब तक सच है, प्रगतिशील व्यवहार करते समय विपरीत व्यवहार अक्सर बेहतर होता है (जो मुझे लगता है कि शायद डिफ़ॉल्ट कार्रवाई को ओवरराइड करने का सबसे संभावित कारण है)

— meandmycode

दोनों किसी घटना के डिफ़ॉल्ट व्यवहार को अवरुद्ध करने के तरीके हैं, यह सिर्फ एक समस्या है कि आप किस समस्या को हल करने की कोशिश कर रहे हैं।

— 21

Answer 3

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

जॉन रेजिग ( karim79 के संदेश में ) से jQuery और पहले से जुड़ा हुआ उद्धरण सामान्य कार्य में घटना संचालकों की गलतफहमी का स्रोत लगता है।

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

MDN से प्रलेखन बताते हैं कि कैसे return falseमें एक ईवेंट हैंडलर काम करता है

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

आगे पढ़ने के लिए, MSDN और W3C DOM 2 ईवेंट्स प्रलेखन पर संलग्न देखें ।

Comments

@rds जो कहता है कि "preventDefault DOM के माध्यम से ईवेंट के आगे प्रसार को नहीं रोकता है। इसके लिए .stopPropagation का उपयोग किया जाना चाहिए।"

— गैरेट

बारीकी से संबंधित प्रश्न पर एक उत्तर में आरोप लगाया गया है कि HTML 5 से पहले, किसी इवेंट हैंडलर से झूठे रिटर्न को लेकर कुछ भी करने का अनुमान नहीं लगाया गया था । अब, शायद यह एक गलत व्याख्या है (हार्ड समझने की) युक्ति, या हो सकता है इसके बावजूद कि यह शाब्दिक रूप से सभी ब्राउज़रों की व्याख्या नहीं return falseकी गई हो event.preventDefault()। लेकिन मुझे पता नहीं; यह मुझे एक चुटकी नमक के साथ लेने के लिए पर्याप्त है।

— मार्क अमेरी

मुझे नफरत है कि कैसे गूगल में हर जावास्क्रिप्ट खोज परिणाम वास्तव में jQuery के बारे में है, +1

— अलेक्जेंडर डर्क

उन्होंने इसे जावास्क्रिप्ट और jQuery दोनों के रूप में टैग किया है, और दोनों सही हैं। jQueryकेवल जावास्क्रिप्ट का उप-सेट है, अपनी भाषा नहीं।

— प्रो ०

Answer 4

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

फ्यूल योर कोडिंग में vs vs बनाम एक बेहतरीन लेख हैreturn false;event.preventDefault()event.stopPropagation()event.stopImmediatePropagation() ।

Comments

@VisruthCV संग्रह संस्करण के लिंक के साथ मेरा जोड़ा नोट देखें

— JAAulde

Answer 5

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

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

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

Comments

यदि कोड के अन्य भाग इस घटना को सुन रहे हैं, event.stopPropagation (); उनके कॉलबैक को रद्द कर देगा?

— 21

Answer 6

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

Answer 7

मुझे लगता है

event.preventDefault()

घटनाओं को रद्द करने का w3c निर्दिष्ट तरीका है।

आप इवेंट रद्द करने पर W3C कल्पना में इसे पढ़ सकते हैं ।

इसके अलावा, आप हर स्थिति में गलत उपयोग नहीं कर सकते। जब href विशेषता में एक जावास्क्रिप्ट फंक्शन दिया जाता है और यदि आप गलत तरीके से लौटते हैं तो यूजर को एक पेज पर रीडायरेक्ट लिखा जाएगा।

Comments

मैं कभी भी किसी भी ब्राउज़र में नहीं मिला हूं। शायद आप इसे भ्रमित करते हैं <a href="javascript:return false"या कुछ के साथ ?

— mplungjan

-1; यह दावा करता है कि एक असत्य जो असत्य है, एक पाठ पृष्ठ उत्पन्न करेगा, जिस पर "असत्य" शब्द लिखा गया है, यह पूर्ण बकवास है।

— मार्क अमेरी

(ऋण) 1; टूटी हुई कड़ी + पूरी बकवास

— फिल

Answer 8

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

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

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

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

Answer 9

मेरे अनुभव से मेरा कहना है, कि इसका उपयोग करना हमेशा बेहतर होता है

event.preventDefault() 

जब भी हमें return false event.preventDefault()ठीक काम करने की बजाय, आवश्यक रूप से घटना को रोकने या रोकने के लिए व्यावहारिक रूप से ।

Comments

बेहतर क्यों? आपने यहाँ पर जो भी उचित औचित्य दिया है। -1।

— मार्क अमेरी

मामले में कई ईवेंट बाइंडिंग हैं, e.preventDefault () झूठे रिटर्न की तुलना में अधिक लक्षित है।

— तायार्ग

preventDefaultकुछ अंग्रेजी शब्द है जो मैं समझता हूं कि यह "डिफ़ॉल्ट को रोकता है"। return falseकुछ अंग्रेजी शब्द हैं जिन्हें मैं समझता हूं कि यह "झूठे हैं" लेकिन मुझे नहीं पता कि जब तक मैं इस गुप्त कोड को Google नहीं करता हूं। और बोनस, मैं अलग से नियंत्रित कर सकता हूं stopPropagationऔर preventDefault ।

— जोन

Answer 10

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

जब आप गलत लिखते हैं तो यह आपके लिए पर्दे के पीछे की बातें करता है।

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

Answer 11

e.preventDefault ();

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

उदाहरण

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

कारण:-

उपयोग करने का कारण यह 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>

Answer 12

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

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

वापसी झूठी है। ईवेंटवेंटडेफ़ॉल्ट और ई.स्टॉपप्रॉपैगेशन

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

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

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

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

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

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

Answer 13

मेरे अनुभव से। stopPropagation () का उपयोग ज्यादातर सीएसएस प्रभाव या एनीमेशन कार्यों में किया जाता है, उदाहरण के लिए जब आपके पास कार्ड और बटन तत्व दोनों के लिए होवर प्रभाव होता है, जब आप बटन पर होवर करते हैं तो कार्ड और बटन दोनों हॉवर प्रभाव इस मामले में चालू हो जाएंगे। , आप का उपयोग कर सकते हैं Event.stopPropagation () बुब्बलिंग क्रियाओं को रोकें, और event.preventDefault () ब्राउज़र क्रियाओं के डिफ़ॉल्ट व्यवहार को रोकने के लिए है। उदाहरण के लिए, आपके पास फ़ॉर्म है, लेकिन आपने सबमिट कार्रवाई के लिए केवल क्लिक इवेंट को परिभाषित किया है, अगर उपयोगकर्ता एंटर दबाकर फ़ॉर्म सबमिट करता है, तो ब्राउज़र कीपर इवेंट द्वारा ट्रिगर किया जाता है, न कि आपका क्लिक इवेंट यहां आपको इवेंट का उपयोग करना चाहिए ।preventDefault () अनुचित से बचने के लिए व्यवहार। मुझे नहीं पता कि नरक क्या झूठ है; क्षमा करें। अधिक स्पष्टीकरण के लिए इस लिंक पर जाएं और लाइन # 33 के साथ खेलेंhttps://www.codecademy.com/courses/introduction-to-javascript/lessons/requests-i/exercises/xhr-get-request-iv