Скрыть div при нажатии на него

Этот вопрос задавался несколько раз, однако ни один из ответов не работает для меня.

css div имеет следующий вид:

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

Я попытался использовать следующий код:

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

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

а также этот код:

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

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

Но всякий раз, когда я нажимаю на div, он также исчезает, не знаю, почему, но это так.
Любая вещь, которая может работать?

Ответы

Ответ 1

Как ваша цель имеет id=info, поэтому вы можете попробовать:

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

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

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

Вы также можете попробовать:

$(document).click(function() {

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

});

Согласно комментарию

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

Прикрепите обработчик события onclick к объекту document:

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

Демо: http://jsfiddle.net/aUjRG/

Вот решение в чистом JavaScript, которое поможет вам лучше понять, что это происходит:

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

document.onclick = hideInfo;

Демо: http://jsfiddle.net/mmzc8/

Оба решения будут проверять, было ли местоположение, на которое щелкнул пользователь, на элементе с идентификатором info. Предполагая, что пользователь не нажал на элемент info, затем скройте элемент info.

Ответ 3

Чтобы гарантировать, что у вас есть решение, которое работает и на iPads, вам нужно вместо этого использовать следующий триггер функции:

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

Аналогично, если вы хотите закрыть приложение mouseup, добавьте 'touchhend':

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

Ответ 4

Попробуйте этот код, это лучшее для меня.

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

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

Ответ 5

Вы можете добавить класс только для проверки щелчком мыши, что конкретный div или любой из этого элемента div щелкнул или нет.

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

Попробуйте следующее решение. Он даже работает рекурсивным:

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

Ссылка - fooobar.com/info/2258/...