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();
    }
});