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




html hide (20)

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

$('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 के अंदर लिंक हैं और जब वे क्लिक करते समय काम नहीं करते हैं।


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

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


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's .off () पर एक कॉल जोड़ा गया।
  3. मोबाइल कार्यक्षमता के लिए शामिल स्पर्श

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


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

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

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

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

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

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

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

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

तो आपका एचटीएमएल इस तरह दिखेगा:

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

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

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

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

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

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


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

var close = true;

$(function () {

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

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


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

});

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

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

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

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

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

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

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

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

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

कुछ इस तरह:

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

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



लाइव डेमो

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

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

सबसे लोकप्रिय उत्तर के लिए 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 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");  

}); 

FIDDLE


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

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


<!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>

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






styling