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

VisioN · Accepted Answer · 2012-06-20 16:21:12Z

14

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

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

answered Jun 20, 2012 at 16:21

VisioN

146k35 gold badges287 silver badges291 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

m59 Over a year ago

Minor detail, but why not use strict equality?

VisioN Over a year ago

@m59 There is no difference when you compare references, otherwise possible nano difference in speed is not important in this context.

xCander · Accepted Answer · 2012-06-20 16:21:11Z

0

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

answered Jun 20, 2012 at 16:21

xCander

1,3378 silver badges16 bronze badges

1 Comment

xCander Over a year ago

VisioN has the best solution, ignore this post

VisioN · Accepted Answer · 2012-06-20 16:30:24Z

0

Change to:

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

edited Jun 20, 2012 at 16:30

VisioN

146k35 gold badges287 silver badges291 bronze badges

answered Jun 20, 2012 at 16:20

Jessica Aline

11 bronze badge

1 Comment

j08691 Over a year ago

That only works if the child is clicked. What happens if the parent is clicked?

Deepak Verma · Accepted Answer · 2015-07-02 10:30:00Z

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 2, 2015 at 10:30

Deepak Verma

1

Collectives™ on Stack Overflow

Trigger event on parent click but not on children

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Linked

Related