मैं तत्व के बाहर कहीं भी एक क्लिक घटना पर एक तत्व को कैसे छिपा सकता हूं?

121

मैं जानना चाहूंगा कि क्या पृष्ठ पर कहीं भी क्लिक करने पर यह दृश्य तत्वों को छिपाने का सही तरीका है।

$(document).click(function (event) {            
    $('#myDIV:visible').hide();
});

तत्व (div, span, आदि) गायब नहीं होना चाहिए जब एक क्लिक इवेंट तत्व की सीमाओं के भीतर होता है।

jquery events event-bubbling

— Franek
स्रोत

204

अगर मैं समझता हूं, आप किसी भी जगह पर क्लिक करना चाहते हैं जब आप कहीं भी क्लिक करते हैं लेकिन div, और यदि आप div पर क्लिक करते हैं, तो यह बंद नहीं होता है। आप इस कोड के साथ ऐसा कर सकते हैं:

$(document).click(function() {
    alert("me");
});
$(".myDiv").click(function(e) {
    e.stopPropagation(); // This is the preferred method.
    return false;        // This should not be used unless you do not want
                         // any click events registering inside the div
});

यह पूरे पृष्ठ पर क्लिक को बांधता है, लेकिन यदि आप प्रश्न में दिए गए क्लिक पर क्लिक करते हैं, तो यह क्लिक इवेंट को रद्द कर देगा।

— जेरेमी बी।
स्रोत

1

यह ठीक काम करता है .. लेकिन जब मैं उस बटन पर क्लिक करता हूं जो पॉपअप कहता है, तो पॉपअप आता है और फिर तुरंत गायब हो जाता है। उसके लिए क्या करें क्योंकि दस्तावेज़ एक समय में दो कार्रवाई कर रहा है। शरीर पर पॉपअप कॉल करने के लिए क्लिक करें और शरीर पर पॉपअप मिटाने के लिए क्लिक करें

— वीर श्रीवास्तव

@VeerShrivastav यहां भी ऐसा ही होता है। e.stopPropagation (); सभी क्लिक संचालकों बंद हो जाएगा

— brunodd

यदि आपके पास अन्य तत्व .myDivतत्व में हैं तो यह सफारी में काम नहीं करेगा । उदाहरण के लिए, यदि आपके अंदर चुनिंदा ड्रॉपडाउन है .myDiv। जब आप चयन पर क्लिक करते हैं, तो आपको लगता है कि आप बॉक्स के बाहर क्लिक करेंगे।

— कोडगोडी

24

इसे इस्तेमाल करे

 $('.myDiv').click(function(e) { //button click class name is myDiv
  e.stopPropagation();
 })

 $(function(){
  $(document).click(function(){  
  $('.myDiv').hide(); //hide the button

  });
});

मैं आईडी के बजाय कक्षा के नाम का उपयोग करता हूं , क्योंकि asp.net में आपको अतिरिक्त सामान के बारे में चिंता करनी होगी। नेट आईडी से जुड़ता है

EDIT- चूंकि आपने एक और टुकड़ा जोड़ा है, इसलिए यह इस तरह काम करेगा:

 $('.myDiv').click(function() { //button click class name is myDiv
  e.stopPropagation();
 })

 $(function(){
  $('.openDiv').click(function() {
  $('.myDiv').show(); 

  });
  $(document).click(function(){  
  $('.myDiv').hide(); //hide the button

  });
});

— TStamper
स्रोत

22

JQuery 1.7 के रूप में घटनाओं को संभालने के लिए एक नया तरीका है। मैंने सोचा कि मैं यहाँ केवल यह प्रदर्शित करने के लिए उत्तर दूंगा कि मैं इस "नए" तरीके से कैसे कर सकता हूँ। यदि आपने नहीं किया है, तो मैं आपको "ऑन" विधि के लिए jQuery डॉक्स पढ़ने की सलाह देता हूं ।

var handler = function(event){
  // if the target is a descendent of container do nothing
  if($(event.target).is(".container, .container *")) return;

  // remove event handler from document
  $(document).off("click", handler);

  // dostuff
}

$(document).on("click", handler);

यहाँ हम jQuery के चयनकर्ताओं और घटनाओं के बुदबुदाते हुए गाली दे रहे हैं। ध्यान दें कि मैं सुनिश्चित करता हूं कि मैं इवेंट हैंडलर को बाद में साफ कर दूं। आप इस व्यवहार को स्वचालित रूप से देख सकते हैं $('.container').one( देखें: डॉक्स ) लेकिन क्योंकि हमें उस हैंडलर के भीतर सशर्त करने की आवश्यकता है जो यहां लागू नहीं है।

— बेन टेलर
स्रोत

13

यह निम्नलिखित कोड उदाहरण मेरे लिए सबसे अच्छा काम करता है। जब आप 'रिटर्न असत्य' का उपयोग कर सकते हैं, जो उस ईवेंट के सभी हैंडलिंग को बंद कर देता है, जिसमें कोई भी बच्चा नहीं है। यदि आप पॉप-अप div (उदाहरण के लिए एक पॉप-अप लॉगिन फ़ॉर्म) पर नियंत्रण रखना चाहते हैं, तो आपको event.stopPropogation () का उपयोग करने की आवश्यकता है।

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <a id="link" href="#">show box</a>
    <div id="box" style="background: #eee; display: none">
        <p>a paragraph of text</p>
        <input type="file"  />
    </div>

    <script src="jquery.js" type="text/javascript"></script>

    <script type="text/javascript">
        var box = $('#box');
        var link = $('#link');

        link.click(function() {
            box.show(); return false;
        });

        $(document).click(function() {
            box.hide();
        });

        box.click(function(e) {
            e.stopPropagation();
        });

    </script>
</body>
</html>

6

धन्यवाद, थॉमस। मैं JS के लिए नया हूं और अपनी समस्या के समाधान के लिए पागल हो रहा हूं। तुम्हारी मदद की।

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

शायद मेरा कोड किसी की मदद कर सकता है:

<body>
<button class="login">Logg inn</button>
<script type="text/javascript">

    $("button.login").click(function () {
        if ($("div#box:first").is(":hidden")) {
                $("div#box").slideDown("slow");} 
            else {
                $("div#box").slideUp("slow");
                }
    });
    </script>
<div id="box">Lots of login content</div>

<script type="text/javascript">
    var box = $('#box');
    var login = $('.login');

    login.click(function() {
        box.show(); return false;
    });

    $(document).click(function() {
        box.hide();
    });

    box.click(function(e) {
        e.stopPropagation();
    });

</script>

</body>

— मामूली सिपाही
स्रोत

5

आप क्या कर सकते हैं:

$(document).click(function (e)
{

  var container = $("div");

   if (!container.is(e.target) && container.has(e.target).length === 0)
  {
 container.fadeOut('slow');

   }

});

यदि आपका लक्ष्य div नहीं है, तो div को छिपाकर उसकी लंबाई की जाँच करें जो शून्य के बराबर है।

— संदीप पाल
स्रोत

5

मैंने नीचे किया। साझा करने के बारे में सोचा ताकि किसी और को भी फायदा हो सके।

$("div#newButtonDiv").click(function(){
    $(this).find("ul.sub-menu").css({"display":"block"});

    $(this).click(function(event){
        event.stopPropagation();
        $("html").click(function(){
            $(this).find("ul.sub-menu").css({"display":"none"});
        }
    });
});

मुझे पता है अगर मैं इस पर किसी की मदद कर सकते हैं।

— foxybagga
स्रोत

महान कोड और निष्पादित div#newButtonDivनहीं होने पर क्लिक नहीं किया जाता है। मैं आपको .click()पंक्ति 4 पर दूसरा हटाने की सलाह दूंगा (यदि आप ऐसा करते हैं, तो समापन ब्रेसिज़, कोष्ठक और अर्ध-बृहदान्त्र - लाइन 9 को हटाने के लिए याद रखें)।

— aulah

4

इसे इस्तेमाल करे:

 $(document).mouseup(function (e) {
    var div = $("#yourdivid");
    if (!div.is(e.target) && div.has(e.target).length === 0) 
    {
       div.hide();
     }
    });

— नालन मधेश्वरन
स्रोत

3

कंटेनर क्लिक को छिपाने का एक और तरीका जब एक क्लिक बच्चों के तत्व में होता है;

$(document).on('click', function(e) {
    if(!$.contains($('.yourContainer').get(0), e.target)) {
        $('.yourContainer').hide();
    }
});

— रेनाटो गामा
स्रोत

3

  $(document).on('click', function(e) { // Hides the div by clicking any where in the screen
        if ( $(e.target).closest('#suggest_input').length ) {
            $(".suggest_div").show();
        }else if ( ! $(e.target).closest('.suggest_container').length ) {
            $('.suggest_div').hide();
        }
    });

यहाँ #suggest_input टेक्स्टबॉक्स का नाम है और .suggest_container ul वर्ग का नाम है और .suggest_div मेरे ऑटो सुझाव के लिए मुख्य div तत्व है।

यह कोड स्क्रीन में किसी भी स्थान पर क्लिक करके दिव्य तत्वों को छिपाने के लिए है। हर काम करने से पहले कृपया कोड को समझ लें और कॉपी कर लें ...

— शेख अरबाज़
स्रोत

2

यह कोशिश करो, यह मेरे लिए एकदम सही काम कर रहा है।

$(document).mouseup(function (e)
{
    var searchcontainer = $("#search_container");

    if (!searchcontainer.is(e.target) // if the target of the click isn't the container...
        && searchcontainer.has(e.target).length === 0) // ... nor a descendant of the container
    {
        searchcontainer.hide();
    }
});

— हसन सरदार
स्रोत

2

$('html').click(function() {
//Hide the menus if it is visible
});

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

लेकिन आपको इन बातों को भी ध्यान में रखना होगा। http://css-tricks.com/dangers-stopping-event-propagation/

— मुहम्मद ताहिर
स्रोत

2

यहां संदीप पाल के उत्तर के आधार पर एक कार्य सीएसएस / छोटा जेएस समाधान दिया गया है:

$(document).click(function (e)
{
  if (!$("#noticeMenu").is(e.target) && $("#noticeMenu").has(e.target).length == 0)
  {
   $("#menu-toggle3").prop('checked', false);
  }
});

चेकबॉक्स पर क्लिक करके और फिर मेनू के बाहर इसे आज़माएँ:

https://jsfiddle.net/qo90txr8/

— Bjoerg
स्रोत

1

यह काम नहीं करता है - जब आप इसके अंदर क्लिक करते हैं तो यह .myDIV को छुपाता है।

$('.openDiv').click(function(e) {
$('.myDiv').show(); 
e.stopPropagation();
})

$(document).click(function(){  
$('.myDiv').hide(); 

});

});

<a class="openDiv">DISPLAY DIV</a>

<div class="myDiv">HIDE DIV</div>

— Franek
स्रोत

इसलिए आप चाहते हैं कि लिंक दिखाने के लिए div शो करे, तब उस e.stopPropa को ले जाएं। वहां से बाहर निकलें और मेरे विकल्प का पालन करें

— TStamper

1

उपरोक्त सुझावों में सिर्फ 2 छोटे सुधार:

डॉक्यूमेंट को अनबाइंड करें

इस घटना पर प्रसार को रोकें जिसने इसे एक क्लिक माना

jQuery(thelink).click(function(e){
    jQuery(thepop).show();

    // bind the hide controls
    var jpop=jQuery(thepop);
    jQuery(document).bind("click.hidethepop", function() {
            jpop.hide();
            // unbind the hide controls
            jQuery(document).unbind("click.hidethepop");
    });
    // dont close thepop when you click on thepop
    jQuery(thepop).click(function(e) {
        e.stopPropagation();
    });
    // and dont close thepop now 
    e.stopPropagation();
});

— commonpike
स्रोत

1

$(document).ready(function(){

$("button").click(function(){
   
       
        $(".div3").toggle(1000);
    });
   $("body").click(function(event) {
   if($(event.target).attr('class') != '1' && $(event.target).attr('class') != 'div3'){
       $(".div3").hide(1000);}
    }); 
   
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<button class="1">Click to fade in boxes</button><br><br>

<body style="width:100%;height:200px;background-color:pink;">
<div class="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div><body>

स्निपेट का विस्तार करें

— एहसान खान
स्रोत

0

$( "element" ).focusout(function() {
    //your code on element
})

— जाफर चौपन
स्रोत

5

हालांकि यह कोड प्रश्न को हल कर सकता है, स्पष्टीकरण सहित वास्तव में आपकी पोस्ट की गुणवत्ता में सुधार करने में मदद करता है।

— श्री

-1

$(document).mouseup(function (e)
{
    var mydiv = $('div#mydiv');
    if (!mydiv.is(e.target) && mydiv.has(e.target).length === 0){
       search.slideUp();
    }
});

— मुहम्मद गीतापसंद
स्रोत

-1

सरल समाधान: कुछ विशिष्ट तत्व के बाहर कहीं भी एक क्लिक घटना पर एक तत्व छिपाएँ।

$(document).on('click', function () {
                $('.element').hide();
            });
            //element will not Hide on click some specific control inside document
            $('.control-1').on('click', function (e) {
                e.stopPropagation();
            });

— सुपर मॉडल
स्रोत