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

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

• javascript
• jquery
• html
• css

4 Answers 4

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

DEMO: http://jsfiddle/Bt5HA/4/

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

Change to:

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

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/VnHGh/24/