Hide a div when clicked outside of it

问题

This question has been asked multiple times, however none of the answers seem to work for me.

The css of the div is as follows:

#info{
  display: none;
  position: fixed;
  z-index: 500;
  height: 50%;
  width: 60%;
  overflow: auto;
  background: rgba(187, 187, 187, .8);
}

I tried to use the following code:

$("#info").click(function(e){
  e.stopPropagation();
});

$(document).click(function(){
  $("#info").hide();
});

as well as this code:

$(document).mouseup(function (e){
    var container = $("#info");

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

Yet whenever i click on the div it also disappears, no clue why but it does.
Any thing else that might work?

回答1:

As your target has id=info, so you can try:

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

  // check that your clicked
  // element has no id=info

  if( e.target.id != 'info') {
    $("#info").hide();
  }
});

You can also try:

$(document).click(function() {

  if( this.id != 'info') {
    $("#info").hide();
  }

});

According to comment

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

    // check that your clicked
    // element has no id=info
    // and is not child of info
    if (e.target.id != 'info' && !$('#info').find(e.target).length) {
        $("#info").hide();
    }
});

回答2:

Attach an onclick event handler to the document object:

$(document).click(function(e) {   
    if(e.target.id != 'info') {
        $("#info").hide();   
    } 
});

Demo: http://jsfiddle.net/aUjRG/

Here is a solution in pure JavaScript to help you better understand what it happening:

function hideInfo(){
    if(window.event.srcElement.id != 'info'){
        document.getElementById('info').style.display = 'none';
    }
}

document.onclick = hideInfo;

Demo: http://jsfiddle.net/mmzc8/

Both solutions will check if the location that the user clicked was on the element with an ID of info. Assuming that the user did not click on the info element, then hide the info element.

回答3:

To ensure you have a solution that works on iPads too, then you need to use the following function trigger instead:

$(document).on("mousedown touchstart",function(e){
  var $info = $('#info');
  if (!$info.is(e.target) && $info.has(e.target).length === 0) {
    $info.hide();
  }
});

Similarly, if you are looking to cover off mouseup, add 'touchend':

$(document).on("mouseup touchend",function(e){
  ...
});

回答4:

Try this code, this is the best for me.

jQuery('.button_show_container').click(function(e) {
    jQuery('.container').slideToggle('fast'); 
    e.stopPropagation();
});

jQuery(document).click(function() {
        jQuery('.container').slideUp('fast');
});

回答5:

You can add a class only for check on mouse click that specific div or any within that div element clicked or not.

$(document).click(function(e){            
    if ( !$(e.target).hasClass("[class name for check]") &&
         $("[element class or id]").css("display")=="block" ) {
            //...code if clicked out side div
    }
});

回答6:

Try the below solution. It's even working recursive:

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

Reference - https://stackoverflow.com/a/7385673/3910232

来源：https://stackoverflow.com/questions/11545518/hide-a-div-when-clicked-outside-of-it

标签

jquery

html

onclick

hide