Trigger event on parent click but not on children

Question

If I have a parent div that is positioned absolutely and then a child div that has a higher z-index and is positioned relatively, is there a way to have a click event register only if the parent div is clicked, but not the inside div?

Relevant jsFiddle

Updated fiddle with text input example

score 14 · Accepted Answer · answered Jun 20 '12 at 16:21

14

$(".parent").click(function(e) {
    if (e.target == this) {
        $(this).hide();
    }
});

DEMO: http://jsfiddle.net/Bt5HA/4/

answered Jun 20 '12 at 16:21

VisioN

143,310
32
282
281

Minor detail, but why not use strict equality? – m59 Mar 09 '15 at 04:28
@m59 There is no difference when you compare references, otherwise possible nano difference in speed is not important in this context. – VisioN Mar 09 '15 at 08:20

score 0 · Answer 2 · edited Jun 20 '12 at 16:30

0

Change to:

$('.child a').click(function(e) {
    $(this).parent('.child').hide();
});

edited Jun 20 '12 at 16:30

VisioN

143,310
32
282
281

answered Jun 20 '12 at 16:20

Jessica Aline

1
1

That only works if the child is clicked. What happens if the parent is clicked? – j08691 Jun 20 '12 at 16:23

score 0 · Answer 3 · answered Jun 20 '12 at 16:21

0

Access child elements and return false when they're clicked http://jsfiddle.net/Bt5HA/3/

answered Jun 20 '12 at 16:21

xCander

1,338
8
16

2

VisioN has the best solution, ignore this post – xCander Jun 20 '12 at 16:21

score 0 · Answer 4 · answered Jul 02 '15 at 10:30

0

Try This

$('#child').click(function(event) {
event.stopPropagation();
alert('You clicked Child');
});


$('#parent').click(function() {
alert('You clicked on Parent');
});

You can check working here http://jsfiddle.net/VnHGh/24/

answered Jul 02 '15 at 10:30

Deepak Verma

1

Trigger event on parent click but not on children

4 Answers4

Linked