jQuery: fadeOut только при нажатии родительского div

Question

JQuery

$(".window-container").click(function() {
    $(this).fadeOut("fast");
});

HTML

<div class="window-container">
    <div class="window-wrap">
        <div class="window-content">
             asdf
        </div>
    </div>
</div>

У меня есть ссылка, которая заставляет window-container появляться каждый дочерний элемент div. (Как всплывающее окно Facebook)

Чтобы закрыть window-container Я хочу иметь возможность кликать где угодно, кроме как внутри window-content div. Потому что, если у меня есть вход, содержащийся внутри, и я сосредоточусь на нем, он закроет все.

Так, как я могу закрыть его, только если пользователь нажимает window-container или window-wrap div?

Answer 1

Просто отметьте event.target, чтобы убедиться, что событие click произошло от div.window-container или div.window-wrap.

$(".window-container").click(function(e)
{
    if ($(e.target).is('div.window-container, div.window-wrap'))
    {
        $(this).fadeOut("fast");
    }
});

Альтернативно:

$(".window-container").click(function(e)
{
    if ($(e.target).has('div.window-content').length)
    {
        $(this).fadeOut("fast");
    }
});

Answer 2

$(".window-container").click(function (e) {
        $(this).fadeOut("fast");
        e.stopPropagation();
    });
    $(".window-wrap, .window-content").click(function (e) {
        $(".window-container").css("display", "block !important");
        e.stopPropagation();
    });

    $("body").click(function () {
        $(".window-container").fadeOut("fast");
    });

Answer 3

Лучший способ - остановить распространение события ( с помощью event.stopPropagation()), когда оно инициируется из элемента .window-content.

$('.window-content').click(function(e){
   e.stopPropagation();
});

Таким образом, событие click никогда не достигнет элемента .window-container.