JQuery тело документа одним щелчком мыши

Question

Может ли кто-нибудь помочь мне с этим? :

У меня есть кнопка, которая при нажатии показывает определенный div. Этот div имеет несколько потомков. Теперь я хочу, чтобы, когда я щелкаю где-то еще в документе, , но не среди потомков , этот div исчезал. я думал использовать не селектор вот так:

$("#button").click(function(){
    $("#mydiv").show();
    $(document.body).not($("#mydiv").children()).one('click',function(e) {
        $("#mydiv").hide(); 
    });
        return false;   
}); 

но это не работает! Есть идеи почему? спасибо

Answer 1

Как насчет проверки события щелчка, чтобы увидеть, что было нажано? В частности, посмотрите на event.target.

$(document).click(function(event) {
  var target = $(event.target);

  if (!target.attr('id').match(/^mydiv/) && target.parents('#mydiv').length == 0) {
    $('#mydiv').hide();
  }
});

Я использовал этот код раньше, чтобы закрыть открытое окно, когда кто-то щелкает где-нибудь, кроме окна.

Answer 2

Используйте ближайший, чтобы проверить, является ли цель потомком mydiv.

$("#button").click(function(){
    $("#mydiv").show();
    $(document.body).click(function() {
        if ($(event.target).closest("#mydiv").length == 0)
            $("#mydiv").hide();     
    });
    return false;   
});

Вы не можете использовать one(), потому что событие будет удалено, если вы нажмете внутри mydiv. Вам нужно будет отменить привязку пользовательского события, если вы хотите удалить его.

Answer 3

Возможно, проблема в том, что вы передаете в .not(), чтобы исключить

.not($("#mydiv").children())

В данный момент вы передаете объект jQuery, но из документов , то, что передается в .not(), должно быть либо строковым селектором, элементом DOM или массивом элементов DOM. Поэтому простое преобразование объекта jQuery в массив элементов должно работать

$("#button").click(function(){
    var myDiv = $("#mydiv").show();
    $(document.body).not(myDiv.children().get()).one('click',function(e) {
        myDiv.hide();     
    });
        return false;   
});