Clickable area around overlay content

Question

It's probably an easy solution but I just can't get my head around it. What I want to do is to make an overlay layer with child layers clickable, without assigning any interaction to the children. Like so -

<div class="overlay">
    <div class="content">Lorem ipsum dolor.</div>
</div>

jQuery sample function:

$('.overlay').click(function() {
    $(this).hide();
});

What happens here is that the function runs even if I click on a child layer. How should I set this up so that only the area around the children is affected?

Answer 1

You could check the click target by e.target

$('.overlay').click(function(e) {
    if (!$(e.target).is('.content')) {
        $(this).hide();
    }
});

Answer 2

try with e.stopPropagation(); -

$('.content').click(function(e) {
    e.stopPropagation();
    alert('child');
});

JSFiddle​

Answer 3

创建的示例，单击内容可防止隐藏操作示例