jquery document body one click event

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 в, но from the docs, то, что передается в .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; 
});