CODEWITHSUNDEEP
javascriptjqueryhtmloverlay
Staffan Estberg
Staffan Estberg

Reputation: 7025

Clickable area around overlay content

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?

Upvotes: 1

Views: 184

Answers (3)

Alex
Alex

Reputation: 349

Created example, click on content prevent hide actions example

Upvotes: 1

xdazz
xdazz

Reputation: 160833

You could check the click target by e.target

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

Upvotes: 6

Dipak
Dipak

Reputation: 12190

try with e.stopPropagation(); - 

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

JSFiddle ​

Upvotes: 3

Related Questions