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


967

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

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

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

और यह HTML :

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

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


6
सादे जावास्क्रिप्ट का उपयोग करके आप कुछ इस तरह की कोशिश कर सकते हैं: jsfiddle.net/aamir/y7mEY
आमिर अफरीदी

का उपयोग करना $('html')या $(document)उससे बेहतर होगा$('body')
एड्रियन बी

जवाबों:


2484

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

$(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();
    }
});

19
बस इसे मेरी परियोजना में डालें, लेकिन एक मामूली समायोजन के साथ, तत्वों की एक सरणी का उपयोग करके उन सभी को एक बार में लूप करें। jsfiddle.net/LCB5W
थॉमस

5
@mpelzsherman कई लोगों ने टिप्पणी की कि स्निपेट स्पर्श उपकरणों पर काम करता है लेकिन जब से पोस्ट को संपादित किया गया है तब से ये टिप्पणियां कुछ हद तक गायब हो गई हैं। TBH मुझे नहीं पता कि क्या मैंने "माउसअप" का उपयोग किसी विशेष कारण के लिए किया है, लेकिन अगर यह "क्लिक" के साथ भी काम करता है, तो मुझे कोई कारण नहीं दिखता कि आपको "क्लिक" का उपयोग क्यों नहीं करना चाहिए।

6
मुझे ज़रूरत थी कि कंटेनर इस घटना के साथ एक बार छिपा हो, उपयोग किए जाने पर यह कॉलबैक नष्ट हो जाना चाहिए। ऐसा करने के लिए, मैंने बाइंड ("click.namespace") के साथ क्लिक इवेंट पर नाम स्थान का उपयोग किया और जब घटना हुई, तो मैं unbind ("click.namespace") को कॉल करता हूं। और अंत में, मैंने $ (e.target) .closest ("कंटेनर") का उपयोग किया। कंटेनर को पहचानने के लिए लंबाई ... इसलिए, मैंने इस उत्तर से किसी भी चाल का उपयोग नहीं किया: D
Loenix

80
$("YOUR CONTAINER SELECTOR").unbind( 'click', clickDocument );बस बगल में उपयोग करने के लिए याद है .hide()। तो documentक्लिकों के लिए सुनते मत रहो।
ब्रासोफिलो

12
सबसे अच्छे अभ्यासों के लिए मैंने $(document).on("mouseup.hideDocClick", function () { ... });उस फ़ंक्शन में लिखा था जो कंटेनर को खोलता है, और $(document).off('.hideDocClick');छिपाने के कार्य पर। नामस्थानों का उपयोग करके मैं mouseupदस्तावेज़ से जुड़े अन्य संभावित श्रोताओं को नहीं हटा रहा हूं ।
कैम्प्सजोस

204

आप बेहतर कुछ इस तरह के साथ जाना होगा:

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();
    });
});

कितना चतुर! क्या यह तकनीक मानक है?
advait

@advait मैंने पहले इसका उपयोग नहीं देखा था। यह सब hoverघटना हैंडलर के बारे में है , जो कई संभावनाओं को खोलता है।
मकरम सालेह

5
मैं इसे एक अच्छा समाधान नहीं मानता क्योंकि इससे लोगों को लगता है कि विंडो-ऑब्जेक्ट (= वैश्विक चर का उपयोग करके) को आबाद करना ठीक है।

1
बस जो कुछ @ prc322 ने कहा था, उसे जोड़ने के लिए, आप अपने कोड को एक अनाम फ़ंक्शन के साथ लपेट सकते हैं और इसे तुरंत कॉल कर सकते हैं। (function() { // ... code })(); मुझे इस पैटर्न का नाम ओएस याद नहीं है, लेकिन यह सुपर उपयोगी है! आपके सभी घोषित चर समारोह के अंदर रहेंगे और वैश्विक नाम स्थान को प्रदूषित नहीं करेंगे।
पेड्रोमानोएल

3
@ prc322 यदि आपको यह भी पता नहीं है कि एक चर का दायरा कैसे बदलना है, तो आप सही हैं, यह समाधान आपके लिए अच्छा नहीं है ... और न ही जावास्क्रिप्ट है। यदि आप केवल स्टैक ओवरफ्लो से कोड को कॉपी और पेस्ट कर रहे हैं, तो आपको विंडो ऑब्जेक्ट में कुछ लिखने की तुलना में बहुत अधिक समस्याएं होने वाली हैं।
गैविन

87

यह कोड पृष्ठ पर किसी भी क्लिक की घटना का पता लगाता है और फिर #CONTAINERतत्व को छुपाता है यदि और केवल क्लिक किया गया #CONTAINERतत्व न तो तत्व था और न ही उसका कोई वंशज।

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


@ 9Soft मुझे खुशी है कि यह आपकी मदद करने में सक्षम था। आपकी प्रतिक्रिया और शुभकामनाओं के लिए धन्यवाद।
केस

इस समाधान ने कंटेनर के रूप में एक डिव का उपयोग करके मेरे लिए पूरी तरह से काम किया!
JCO9

76

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

कुछ इस तरह:

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

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


हाँ, अब लिंक काम! लेकिन किसी कारण से, जब मैं लिंक पर क्लिक करता हूं, तो यह दो बार फायर करता है।
स्कॉट यू -

मैं इस का एक परिवर्तन का उपयोग कर समाप्त हो गया। मैं पहले जाँचता हूं कि क्या तत्व दिखाई दे रहा है या नहीं। यदि लक्ष्य .hasClass मैं इसे छिपाता है।
हकीकी

और मत भूलो e.stopPropagation();यदि आपके पास अन्य क्लिक श्रोता हैं
डारिन कोलेव

2
-1। यह form_wrapperतब छुपता है जब आप उसके किसी एक बच्चे पर क्लिक करते हैं, जो वांछित व्यवहार नहीं है। इसके बजाय prc322 के उत्तर का उपयोग करें।
मार्क एमी जूल

38

लाइव डेमो

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

$(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();
});

अद्यतन के लिए धन्यवाद, एकदम सही! क्या यह स्पर्श उपकरणों पर काम करता है?
एफएफिश

1
मामले में, आपके पास एक पृष्ठ पर कई ड्रॉपडाउन हैं। मुझे लगता है कि आपको clickedएक खोलने से पहले सभी ड्रॉपडाउन को बंद करना होगा । अन्यथा, stopPropagationयह संभव बनाता है कि एक ही समय में कई ड्रॉपडाउन खुले हों।
T04435

19
$(document).click(function(event) {
    if ( !$(event.target).hasClass('form_wrapper')) {
         $(".form_wrapper").hide();
    }
});

2
हम्म ... अगर मैं डिव के अंदर कुछ क्लिक करता हूं, तो पूरी डिव किसी न किसी वजह से गायब हो जाती है।
स्कॉट यू -

11
लक्ष्य के वर्ग होने की जाँच करने के बजाय, प्रयास करें: यदि ($ (event.target) .closest ('। Form_wrapper) .get (0) == null) {$ ("। Form_wrapper")। Hide (); } यह बीमा करेगा कि div के अंदर चीजों को क्लिक करने से div छिपा नहीं होगा।
जॉन Haager

17

इसका समाधान अपडेट किया गया:

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

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');
    }
});

1
.liveअब हटा दिया गया है ; .onइसके बजाय उपयोग करें ।
ब्रेट

15

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

document.addEventListener('mouseup', function (e) {
    var container = document.getElementById('your container ID');

    if (!container.contains(e.target)) {
        container.style.display = 'none';
    }
}.bind(this));

MDN: https://developer.mozilla.org/en/docs/Web/API/Node/contains


bindवहाँ काम नहीं करता है। क्या आप इसे काम करने के लिए फ़ंक्शन को ठीक कर सकते हैं?
मेमो

9

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

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

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();


8

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

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

});

या

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

});

4
यह उत्तर सही नहीं है। यहां कई उत्तरों की तरह, यह .form_wrapperतब छिपाएगा जब आप इसके बच्चों (अन्य समस्याओं के बीच) पर क्लिक करेंगे ।
मार्क एमी जूल

6

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

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

4
यह उत्तर सही नहीं है। यह .wrapperउस पृष्ठ पर कोई भी बात नहीं छिपाएगा जहां आप क्लिक करते हैं, जो नहीं पूछा गया था।
मार्क ऐमी जूल

6

एक विशिष्ट तत्व को छिपाने के लिए DOM पर हर एक क्लिक को सुनने के बजाय, आप tabindexअभिभावक को सेट कर सकते हैं <div>और 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();
});

5

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

$(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();
    }
});

5

यहाँ एक jsfiddle मैं एक और धागे पर मिला, esc कुंजी के साथ भी काम करता है: 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()
      }
    })

मैं देखता हूं कि यह पता चलता है कि 'क्लिक' ईवेंट #test तत्व के भीतर है .. ने tsing लिंक को jsfiddle.net/TA96A के रूप में आज़माया और लगता है कि वे काम कर सकते हैं।
थॉमस डब्ल्यू

हाँ, यह लिंक के बाहर jsfiddle ब्लॉक जैसा दिखता है। यदि आप http: // jsfiddle.net का उपयोग करते हैं, तो आप परिणाम पृष्ठ लिंक लिंक को देखेंगे :)
djv

5

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. Jquery के .off () को एक इवेंट नेमस्पेस के साथ जोड़ा जो कॉल को डॉक्यूमेंट से ईवेंट को चलाने के लिए जोड़ा जाता है।
  3. मोबाइल कार्यक्षमता के लिए शामिल टचएंड

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


4

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

IPad के लिए jquery में मूसडाउन / माउसअप काम करता है?

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

$(document).bind('touchend', function(e) {
        var container = $("YOURCONTAINER");

          if (container.has(e.target).length === 0)
          {
              container.hide();
          }
      });

4

(बस 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();
    }
});

ऐसा इसलिए है क्योंकि मेरी साइट के कुछ लिंक पृष्ठ पर नई सामग्री जोड़ते हैं। यदि इस नई सामग्री को उसी समय जोड़ा जाता है जिससे नेविगेशन मेनू गायब हो जाता है तो यह उपयोगकर्ता के लिए भटकाव हो सकता है।


4

इतने सारे जवाब, पास होने का एक अधिकार होना चाहिए एक जोड़ा ... मैं एक वर्तमान (jQuery 3.1.1) जवाब नहीं देखा - तो:

$(function() {
    $('body').on('mouseup', function() {
        $('#your-selector').hide();
    });
});

3
var n = 0;
$("#container").mouseenter(function() {
n = 0;

}).mouseleave(function() {
n = 1;
});

$("html").click(function(){ 
if (n == 1) {
alert("clickoutside");
}
});

3
 $('body').click(function(event) {
    if (!$(event.target).is('p'))
    {
        $("#e2ma-menu").hide();
    }
});

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


3

यदि आप .form_wrapper पर क्लिक करते हैं तो गलत लौटें:

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

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

3

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

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

यह स्पर्श उपकरणों पर भी काम करेगा, बस यह सुनिश्चित करें कि आप चयनकर्ताओं की अपनी सूची में .form_wrapper का एक अभिभावक शामिल नहीं करते हैं।



3

$(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>


3

Https://sdtuts.com/click-on-not-specified-element/ से कॉपी किया गया

लाइव डेमो http://demos.sdtuts.com/click-on-specified-element

$(document).ready(function () {
    var is_specified_clicked;
    $(".specified_element").click(function () {
        is_specified_clicked = true;
        setTimeout(function () {
            is_specified_clicked = false;
        }, 200);
    })
    $("*").click(function () {
        if (is_specified_clicked == true) {
//WRITE CODE HERE FOR CLICKED ON OTHER ELEMENTS
            $(".event_result").text("you were clicked on specified element");
        } else {
//WRITE CODE HERE FOR SPECIFIED ELEMENT CLICKED
            $(".event_result").text("you were clicked not on specified element");
        }
    })
})

2

मैंने इसे इस तरह किया:

var close = true;

$(function () {

    $('body').click (function(){

        if(close){
            div.hide();
        }
        close = true;
    })


alleswasdenlayeronclicknichtschliessensoll.click( function () {   
        close = false;
    });

});

2
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);
    }
});

2

इस कोड का उपयोग करके आप जितने चाहें उतने आइटम छिपा सकते हैं

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';
    }
   }
})

1

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

    $('.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');

0

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

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

-1, काम नहीं करता है। बहुत दिलचस्प विचार है, लेकिन jQuery डॉक्स गलत हैं। उदाहरण के लिए developer.mozilla.org/en-US/docs/Web/API/… देखें : "MSIE के विपरीत - जिसमें लगभग सभी प्रकार के तत्व धब्बा घटना प्राप्त करते हैं - लगभग सभी प्रकार के तत्व गेको ब्राउज़रों पर इस घटना के साथ काम न करें। " इसके अलावा, क्रोम में परीक्षण किया गया है, और divकभी भी धब्बा नहीं है - धब्बा घटनाओं को उनके बच्चों से भी बुलबुला नहीं कर सकता है। अंत में, भले ही उपरोक्त सत्य नहीं थे, यह केवल तभी काम करेगा जब आप सुनिश्चित करें कि .form_wrapperउपयोगकर्ता द्वारा क्लिक करने से पहले ध्यान में था।
मार्क ऐमी जूल
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.