Hide a div when clicked outside of it

Question

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?

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

Answer 2

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