दिलचस्प पोस्ट
पहचान स्तंभ मूल्यों को प्रोग्राम बदलने के लिए कैसे? Android में वीडियो छवि से फ़्रेम प्राप्त करना BackgroundWorker RunWorkerCompleted ईवेंट स्विफ्ट: आप UIButton और UILabel के लिए पाठ को कैसे घुमा सकते हैं? संपादनटैच ब्लिंकिंग कर्सर अक्षम करें क्या यूआई स्वचालन उपकरण को कमांड लाइन से चलाया जा सकता है? सीटीई और सबक्वेंसी के बीच का अंतर? वर्किंग कॉपी XXX लॉक और एसवीएन में क्लीनअप विफल जेडीके और जेआरई के बीच अंतर क्या है? मैं कैसे जीआईटी को दिखा सकता हूं कि कौन सी शाखाएं चल रही हैं? mongodb: डालें अगर मौजूद नहीं है संकेतक सी में बदल जाता है तो कितना मेमोरी मुक्त हो जाएगी? विज़ुअल स्टूडियो के साथ गिट का इस्तेमाल करना किसी अन्य वर्ण के साथ स्ट्रिंग में कुछ वर्णों को बदलना आरएक्सजेएस का इस्तेमाल करते हुए रीफ्रेश टोकन को संभालना

जब उपयोगकर्ता इसके बाहर क्लिक करता है तो एक DIV छिपाने के लिए jQuery का उपयोग करें

मैं इस कोड का उपयोग कर रहा हूं:

$('body').click(function() { $('.form_wrapper').hide(); }); $('.form_wrapper').click(function(event){ event.stopPropagation(); }); 

और यह एचटीएमएल:

 <div class="form_wrapper"> <a class="agree" href="javascript:;">I Agree</a> <a class="disagree" href="javascript:;">Disagree</a> </div> 

समस्या यह है कि मेरे पास डीआईवी के अंदर लिंक हैं और जब वे क्लिक करते हैं तब काम नहीं करते।

वेब के समाधान से एकत्रित समाधान "जब उपयोगकर्ता इसके बाहर क्लिक करता है तो एक DIV छिपाने के लिए jQuery का उपयोग करें"

एक ही समस्या थी, इस आसान समाधान के साथ आया था यह पुनरावर्ती भी काम कर रहा है:

 $(document).mouseup(function(e) { var container = $("YOUR CONTAINER SELECTOR"); // if the target of the click isn't the container nor a descendant of the container if (!container.is(e.target) && container.has(e.target).length === 0) { container.hide(); } }); 

आप इस तरह से कुछ के साथ बेहतर जाना चाहते हैं:

 var mouse_is_inside = false; $(document).ready(function() { $('.form_content').hover(function(){ mouse_is_inside=true; }, function(){ mouse_is_inside=false; }); $("body").mouseup(function(){ if(! mouse_is_inside) $('.form_wrapper').hide(); }); }); 

आप स्टॉपप्रेजेशन पर निर्भर होने के बजाय शरीर के लिए क्लिक करने वाले क्लिक ईवेंट के लक्ष्य को देखना चाहते हैं।

कुछ इस तरह:

 $("body").click ( function(e) { if(e.target.className !== "form_wrapper") { $(".form_wrapper").hide(); } } ); 

इसके अलावा, शरीर के तत्व में ब्राउज़र में दिखाए गए संपूर्ण दृश्य स्थान शामिल नहीं हो सकते। यदि आप देखते हैं कि आपके क्लिक पंजीकृत नहीं हैं, तो आपको इसके बजाय HTML तत्व के लिए क्लिक हैंडलर जोड़ना पड़ सकता है

यह कोड पेज पर किसी भी क्लिक ईवेंट का पता लगाता है और फिर #CONTAINER तत्व छुपाता है यदि और केवल तभी क्लिक किया गया जब तत्व क्लिक किया गया न तो #CONTAINER तत्व और इसके वंश में से कोई भी नहीं था

 $(document).on('click', function (e) { if ($(e.target).closest("#CONTAINER").length === 0) { $("#CONTAINER").hide(); } }); 
 $(document).click(function(event) { if ( !$(event.target).hasClass('form_wrapper')) { $(".form_wrapper").hide(); } }); 

लाइव डेमो

क्लिक क्षेत्र की जाँच करें लक्षित तत्व में या उसके बच्चे में नहीं है

 $(document).click(function (e) { if ($(e.target).parents(".dropdown").length === 0) { $(".dropdown").hide(); } }); 

अद्यतन करें:

jQuery स्टॉप प्रचार सर्वोत्तम समाधान है

लाइव डेमो

 $(".button").click(function(e){ $(".dropdown").show(); e.stopPropagation(); }); $(".dropdown").click(function(e){ e.stopPropagation(); }); $(document).click(function(){ $(".dropdown").hide(); }); 

निम्न समाधान का अद्यतन:

  • इसके बजाय माउसएन्टर और माउसलेवे का उपयोग करें
  • होवर का लाइव ईवेंट बाइंडिंग का उपयोग करें

var mouseOverActiveElement = false;

 $('.active').live('mouseenter', function(){ mouseOverActiveElement = true; }).live('mouseleave', function(){ mouseOverActiveElement = false; }); $("html").click(function(){ if (!mouseOverActiveElement) { console.log('clicked outside active element'); } }); 

सबसे लोकप्रिय जवाब के लिए jQuery के बिना एक समाधान:

 document.addEventListener('mouseup', function (e) { var container = document.getElementById('your container ID'); if (!container.contains(e.target)) { container.style.display = 'none'; } }.bind(this)); 

एमडीएन: https://developer.mozilla.org/en/docs/Web/API/Node/contains

ईएससी कार्यक्षमता के साथ लाइव डेमो

डेस्कटॉप और मोबाइल दोनों पर काम करता है

 var notH = 1, $pop = $('.form_wrapper').hover(function(){ notH^=1; }); $(document).on('mousedown keydown', function( e ){ if(notH||e.which==27) $pop.hide(); }); 

यदि कुछ मामले के लिए आपको यह सुनिश्चित करने की आवश्यकता है कि आपका तत्व वाकई दिखाई देगा, जब आप दस्तावेज़ पर क्लिक करते हैं: if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();

इस काम की तरह कुछ नहीं होगा?

 $("body *").not(".form_wrapper").click(function() { }); 

या

 $("body *:not(.form_wrapper)").click(function() { }); 

यहां तक ​​कि स्लेकर:

 $("html").click(function(){ $(".wrapper:visible").hide(); }); 

यहां एक जेएसफ़िल्ड है जो मुझे दूसरे धागा पर मिला, एएससी कुंजी के साथ भी काम करता है: http://jsfiddle.net/S5ftb/404

  var button = $('#open')[0] var el = $('#test')[0] $(button).on('click', function(e) { $(el).show() e.stopPropagation() }) $(document).on('click', function(e) { if ($(e.target).closest(el).length === 0) { $(el).hide() } }) $(document).on('keydown', function(e) { if (e.keyCode === 27) { $(el).hide() } }) 

Prc322 के अद्भुत उत्तर से निर्मित

 function hideContainerOnMouseClickOut(selector, callback) { var args = Array.prototype.slice.call(arguments); // Save/convert arguments to array since we won't be able to access these within .on() $(document).on("mouseup.clickOFF touchend.clickOFF", function (e) { var container = $(selector); if (!container.is(e.target) // if the target of the click isn't the container... && container.has(e.target).length === 0) // ... nor a descendant of the container { container.hide(); $(document).off("mouseup.clickOFF touchend.clickOFF"); if (callback) callback.apply(this, args); } }); } 

यह कुछ चीजें जोड़ती है …

  1. "असीमित" आर्ग के साथ एक कॉलबैक के साथ फ़ंक्शन के भीतर रखा गया
  2. जेक्री के फोन पर एक कॉल जोड़ा गया (ओपन) () एक ईवेंट नाम स्थान के साथ जोड़ा गया ताकि वह एक बार चलाने के बाद दस्तावेज़ से ईवेंट को खोल सके।
  3. मोबाइल कार्यक्षमता के लिए शामिल हैं

मुझे उम्मीद है इससे किसी को सहायता मिलेगी!

और आईपैड और आईपोन जैसे टच डिवाइसों के लिए हम निम्नलिखित कोड का उपयोग कर सकते हैं

 $(document).on('touchstart', function (event) { var container = $("YOUR CONTAINER SELECTOR"); if (!container.is(e.target) // if the target of the click isn't the container... && container.has(e.target).length === 0) // ... nor a descendant of the container { container.hide(); } }); 
 var n = 0; $("#container").mouseenter(function() { n = 0; }).mouseleave(function() { n = 1; }); $("html").click(function(){ if (n == 1) { alert("clickoutside"); } }); 

यदि आपको आईओएस के साथ समस्या है, तो माउसअप एप्पल डिवाइस पर काम नहीं कर रहा है।

आईपैड के लिए jquery काम में mousedown / mouseup करता है?

मैं इसका उपयोग करता हूं:

 $(document).bind('touchend', function(e) { var container = $("YOURCONTAINER"); if (container.has(e.target).length === 0) { container.hide(); } }); 
  $('body').click(function(event) { if (!$(event.target).is('p')) { $("#e2ma-menu").hide(); } }); 

p तत्व का नाम है जहां कोई आईडी या वर्ग या तत्व नाम भी पास कर सकता है।

यदि आप पर क्लिक करते हैं, तो वापस लौटें। Form_wrapper:

 $('body').click(function() { $('.form_wrapper').click(function(){ return false }); $('.form_wrapper').hide(); }); //$('.form_wrapper').click(function(event){ // event.stopPropagation(); //}); 

एक विशिष्ट तत्व को छिपाने के लिए DOM पर हर एक क्लिक को सुनने के बजाय, आप माता-पिता <div> को focusout सेट कर सकते हैं और focusout ईवेंट सुन focusout हैं।

tabindex को सुनिश्चित करना यह सुनिश्चित करेगा कि blur घटना <div> (आमतौर पर ऐसा नहीं होता) पर निकाल दिया गया है।

तो आपका HTML ऐसा दिखेगा:

 <div class="form_wrapper" tabindex="0"> <a class="agree" href="javascript:;">I Agree</a> <a class="disagree" href="javascript:;">Disagree</a> </div> 

और आपके जेएस:

 $('.form_wrapper').on('focusout', function(event){ $('.form_wrapper').hide(); }); 

मैंने इसे ऐसा किया:

 var close = true; $(function () { $('body').click (function(){ if(close){ div.hide(); } close = true; }) alleswasdenlayeronclicknichtschliessensoll.click( function () { close = false; }); }); 
 dojo.query(document.body).connect('mouseup',function (e) { var obj = dojo.position(dojo.query('div#divselector')[0]); if (!((e.clientX > obj.x && e.clientX <(obj.x+obj.w)) && (e.clientY > obj.y && e.clientY <(obj.y+obj.h))) ){ MyDive.Hide(id); } }); 

फ़ॉर्म आवरण के बाहर शीर्ष स्तर के तत्वों पर एक क्लिक ईवेंट संलग्न करें, उदाहरण के लिए:

 $('#header, #content, #footer').click(function(){ $('.form_wrapper').hide(); }); 

यह टच डिवाइस पर भी काम करेगा, बस यह सुनिश्चित करें कि आप अपने माता-देन में शामिल नहीं हैं। Form_wrapper आपके चयनकर्ताओं की सूची में

 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); }); </script> </head> <body> <p>If you click on the "Hide" button, I will disappear.</p> <button id="hide">Hide</button> <button id="show">Show</button> </body> </html> 

मैं सबसे ज्यादा वोट देने के लिए सुझाव देना चाहता था, लेकिन यह मेरे लिए काम नहीं करता।

यह विधि लगभग समान है, लेकिन मेरे लिए काम किया http://www.codesynthesis.co.uk/code-snippets/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it

(बस prc322 के उत्तर को जोड़ना।)

मेरे मामले में मैं इस कोड का उपयोग एक नेविगेशन मेनू को छुपाने के लिए कर रहा हूँ, जब उपयोगकर्ता उचित टैब पर क्लिक करता है। मैंने पाया कि यह एक अतिरिक्त स्थिति जोड़ने के लिए उपयोगी था, कि कंटेनर के बाहर क्लिक का लक्ष्य लिंक नहीं है

 $(document).mouseup(function (e) { var container = $("YOUR CONTAINER SELECTOR"); if (!$("a").is(e.target) // if the target of the click isn't a link ... && !container.is(e.target) // ... or the container ... && container.has(e.target).length === 0) // ... or a descendant of the container { container.hide(); } }); 

इसका कारण यह है कि मेरी साइट के कुछ लिंक पेज पर नई सामग्री जोड़ते हैं। यदि यह नई सामग्री एक ही समय में जोड़ा जाता है, तो नेविगेशन मेनू गायब हो जाता है, यह उपयोगकर्ता के लिए अव्यवस्थित हो सकता है।

 var exclude_div = $("#ExcludedDiv");; $(document).click(function(e){ if( !exclude_div.is( e.target ) ) // if target div is not the one you want to exclude then add the class hidden $(".myDiv1").addClass("hidden"); }); 

इस कोड का उपयोग करके आप जितनी चाहें उतनी वस्तुएं छिपा सकते हैं

 var boxArray = ["first element's id","second element's id","nth element's id"]; window.addEventListener('mouseup', function(event){ for(var i=0; i < boxArray.length; i++){ var box = document.getElementById(boxArray[i]); if(event.target != box && event.target.parentNode != box){ box.style.display = 'none'; } } }) 
 $(document).ready(function() { $('.modal-container').on('click', function(e) { if(e.target == $(this)[0]) { $(this).removeClass('active'); // or hide() } }); }); 
 .modal-container { display: none; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 999; } .modal-container.active { display: flex; } .modal { width: 50%; height: auto; margin: 20px; padding: 20px; background-color: #fff; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="modal-container active"> <div class="modal"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac varius purus. Ut consectetur viverra nibh nec maximus. Nam luctus ligula quis arcu accumsan euismod. Pellentesque imperdiet volutpat mi et cursus. Sed consectetur sed tellus ut finibus. Suspendisse porttitor laoreet lobortis. Nam ut blandit metus, ut interdum purus.</p> </div> </div> 

यदि आप ड्रॉपडाउन के बाहर कुछ क्लिक करते हैं, तो ड्रॉपडाउन के बाहर कुछ क्लिक किया जाता है, तो आप अपने "शो" ईवेंट (या स्लिवेडाउन या जो भी हो ड्रॉपडाउन दिखाता है)

  $('.form_wrapper').show(function(){ $(document).bind('click', function (e) { var clicked = $(e.target); if (!clicked.parents().hasClass("class-of-dropdown-container")) { $('.form_wrapper').hide(); } }); }); 

फिर जब इसे छिपाया जाता है, तो क्लिक ईवेंट को खोलें

 $(document).unbind('click'); 

डॉक्स के अनुसार , .blur() <input> टैग से अधिक के लिए काम करता है उदाहरण के लिए:

 $('.form_wrapper').blur(function(){ $(this).hide(); });