दिलचस्प पोस्ट
@ रिसोर्स बनाम @ एटोवर्ड क्या मुझे मुख्य () से EXIT_SUCCESS या 0 वापस चाहिए? सभी Android प्रसारण आशय सूची कहां है getSize () मुझे त्रुटि दे रही है विज़ुअल स्टूडियो में असेंबली संदर्भ कार्य की "विशिष्ट संस्करण" की संपत्ति कैसे ठीक है? डेटा विशेषता मान के आधार पर jquery सॉर्ट सूची WINMAIN और मुख्य () सी ++ (विस्तारित) में टी-एसक्यूएल विभाजन स्ट्रिंग Java 6 enums के लिए मान () कैसे लागू किया जाता है? 3 पार्टी जेएस के लिए ब्राउज़र कैशिंग का लाभ उठाएं PHP और अपरिभाषित करने के लिए कोणीय HTTP पोस्ट टॉमकेट का उपयोग कर एक PHP एप चलाएं? IOC का उपयोग कर रिपॉजिटरी से कार्य कार्यक्षमता की यूनिट को कैसे हटाएं I रिवर्स स्टैक्ड बार ऑर्डर डबल-अंडरस्कोर के साथ पायथन विधि नाम ओवरराइड किया गया है?

चेकबॉक्स पर इवेंट बबुलिंग को कैसे रोकें क्लिक करें

मेरे पास एक चेकबॉक्स है कि मैं क्लिक ईवेंट पर कुछ अजाक्स कार्रवाई करना चाहता हूं, हालांकि चेकबॉक्स एक कंटेनर के अंदर भी होता है, यह स्वयं के क्लिक व्यवहार के साथ होता है, जिसे मैं चेकबॉक्स क्लिक करने पर चलाना नहीं चाहता। यह नमूना दिखाता है कि मैं क्या करना चाहता हूं:

<html lang="en"> <head> <title>Test</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#container').addClass('hidden'); $('#header').click(function() { if($('#container').hasClass('hidden')) { $('#container').removeClass('hidden'); } else { $('#container').addClass('hidden'); } }); $('#header input[type=checkbox]').click(function(event) { // Do something }); }); </script> <style type="text/css"> #container.hidden #body { display:none; } </style> </head> <body> <div id="container"> <div id="header"> <h1>Title</h1> <input type="checkbox" name="test" /> </div> <div id="body"> <p>Some content</p> </div> </div> </body> </html> 

हालांकि, मैं डिफ़ॉल्ट क्लिक व्यवहार (चेकबॉक्स बनने के लिए चेक / अनचेक होने के कारण) के बिना इवेंट बबुलिंग को रोकने का तरीका समझ नहीं सकता

निम्न में से दोनों घटना को बुदबुदाते हुए रोकते हैं, लेकिन चेकबॉक्स स्थिति में भी बदलाव नहीं करते हैं:

 event.preventDefault(); return false; 

वेब के समाधान से एकत्रित समाधान "चेकबॉक्स पर इवेंट बबुलिंग को कैसे रोकें क्लिक करें"

बदलने के

 event.preventDefault(); return false; 

साथ में

 event.stopPropagation(); 

event.stopPropagation ()

घटना के अधिसूचित होने से माता-पिता के किसी भी हैंडलर को रोकने के लिए, एक घटना के माता पिता के तत्वों पर बुदबुदाबंदी रोक देता है।

event.preventDefault ()

डिफ़ॉल्ट कार्य निष्पादित करने से ब्राउज़र को रोकता है इस विधि का प्रयोग करें डीफॉल्ट यह जानने के लिए कि क्या यह विधि कभी भी बुलाया गया था (इस घटना वस्तु पर)।

StopPropagation विधि का प्रयोग करें:

 event.stopPropagation(); 

IE मत भूलना:

 if (event.stopPropagation) { // standard event.stopPropagation(); } else { // IE6-8 event.cancelBubble = true; } 

जैसा कि अन्य लोगों ने उल्लेख किया है, stopPropagation() प्रयास करें।

और कोशिश करने के लिए दूसरा हेन्डलर है: event.cancelBubble = true; यह एक IE विशिष्ट हैंडलर है, लेकिन यह कम से कम एफएफ में समर्थित है वास्तव में इसके बारे में बहुत कुछ पता नहीं है, जैसा कि मैंने खुद का इस्तेमाल नहीं किया है, लेकिन यह एक शॉट के लायक हो सकता है, अगर सब कुछ विफल हो जाता है।

JQuery का उपयोग करते समय आपको स्टॉप फ़ंक्शन को अलग से कॉल करने की आवश्यकता नहीं है ..

आप ईवेंट हैंडलर में सिर्फ return false कर सकते हैं

यह घटना को रोक देगा और बुदबुदा को रद्द कर देगा ..

और देखें:

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

JQuery डॉक्स से:

इसलिए ये हैंडलर, प्रत्यायोजित हैंडलर को event.stopPropagation () कॉल करके या गलत लौटने से ट्रिगर करने से रोका जा सकता है।

घटना बुदबुदाती अवधारणा को समझने के लिए यह एक उत्कृष्ट उदाहरण है ऊपर दिए गए उत्तरों के आधार पर, अंतिम कोड नीचे दिये गये जैसा दिखेगा। जहां उपयोगकर्ता चेकबॉक्स पर क्लिक करता है, उसके मूल तत्व 'हेडर' के ईवेंट प्रचार को event.stopPropagation(); का उपयोग कर बंद कर दिया जाएगा event.stopPropagation();

 $(document).ready(function() { $('#container').addClass('hidden'); $('#header').click(function() { if($('#container').hasClass('hidden')) { $('#container').removeClass('hidden'); } else { $('#container').addClass('hidden'); } }); $('#header input[type=checkbox]').click(function(event) { if (event.stopPropagation) { // standard event.stopPropagation(); } else { // IE6-8 event.cancelBubble = true; } }); }); 

कोड के लिए @ mehras को क्रेडिट मैंने इसे प्रदर्शित करने के लिए सिर्फ एक स्निपेट बनाया है क्योंकि मैंने सोचा कि इसकी सराहना की जाएगी और मैं उस सुविधा का प्रयास करने के लिए एक बहाना चाहता था।

 $(document).ready(function() { $('#container').addClass('hidden'); $('#header').click(function() { if($('#container').hasClass('hidden')) { $('#container').removeClass('hidden'); } else { $('#container').addClass('hidden'); } }); $('#header input[type=checkbox]').click(function(event) { if (event.stopPropagation) { // standard event.stopPropagation(); } else { // IE6-8 event.cancelBubble = true; } }); }); 
 div { text-align: center; padding: 2em; font-size:1.2em } .hidden { display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="header"><input type="checkbox"/>Checkbox won't bubble the event, but this text will.</div> <div id="container">click() bubbled up!</div> 

कोणीय में यह काम करना चाहिए:

 event.preventDefault(); event.stopPropagation();