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>

I have a link that makes window-container and each child div appear. (Like a Facebook popup)

To close window-container I want to be able to click anywhere except within the window-content div. Because if I have an input contained within, and I focus on it, it will close everything.

So how can I have it only close if a user clicks the window-container or window-wrap divs?

Answer 1

Just check event.target to make sure the click event originated from div.window-container or div.window-wrap.

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

Alternately:

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