How to make a click on a child element not be considered a click on it's parent in jQuery?

Question

The question of how to detect a click on anywhere except a specified element has been answered a couple of items like here:

Event on a click everywhere on the page outside of the specific div

The problem I have is trying to figure out how to detect a click anywhere except a given element including one of it's children.

For example in this code:

http://jsfiddle.net/K5cEm/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(function() {

$(document).click(function(e) {
   $('#somediv').hide();
});
$('#somediv').click(function(e) {
   e.stopPropagation();
});

});
</script>

<div style="border: 1px solid red; width:100px; height: 100px" id="somediv">

    <span style="display: block; border: 1px solid green; width:50px; height: 50px; margin: 0 auto" id="someSpan"></span>

</div>

Clicking anywhere outside the red div should cause it to hide. Not only that but also clicking on it's child element (the green span) should cause it to hide. The only time it shouldn't hide is if you click on it but not on the span. As it stands now, the click on the span is also considered a click on the parent div hence it doesn't hide the div if the span is clicked.

How to achieve this?

Blender · Accepted Answer · 2011-12-14 02:02:32Z

7

You can compare the click's target to the element in question:

$(document).click(function(e) {
    if (e.target != $('#somediv')[0]) {
        $('#somediv').hide();
    }
});

Demo: http://jsfiddle.net/K5cEm/7/

edited Dec 14, 2011 at 2:02

answered Dec 14, 2011 at 1:54

Blender

300k55 gold badges462 silver badges511 bronze badges

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

5 Comments

Šime Vidas Over a year ago

You do understand that $(e.target).get(0) is the same as e.target, right? :)

Blender Over a year ago

Thanks, didn't know it was a jQuery object.

Šime Vidas Over a year ago

In this particular case, the check can be: if ( e.target.id !== 'somediv' ) { ...

Blender Over a year ago

Thanks for the second optimization. I'll keep it general for now, but the OP can optimize it if he/she wishes.

Blaskovicz Over a year ago

As some bonus information, you can use if($("#parentDiv").has(e.target).length) to check if the child element is contained at all within a div. This is especially useful for bootstrap buttons where you could actually be clicking on the <i> or the <button> elements themselves.

Terry · Accepted Answer · 2011-12-14 01:54:46Z

1

Add this:

$('#somediv').click(function(e) {
    e.stopPropagation();
}).children().click(function(e) {
    $('#somediv').hide();
});

Here's your updated working fiddle: http://jsfiddle.net/K5cEm/5/

answered Dec 14, 2011 at 1:54

Terry

14.2k9 gold badges58 silver badges84 bronze badges

Comments

Šime Vidas · Accepted Answer · 2011-12-14 02:10:13Z

1

I'd do it like so:

$(function () {
    var elem = $( '#somediv' )[0];

    $( document ).click( function ( e ) {
        if ( e.target !== elem ) {
            $( elem ).hide();
        }
    });
});

Live demo: http://jsfiddle.net/uMLrC/

So this

var elem = $( '#somediv' )[0];

caches the reference to the DIV element. We want to cache this reference on page load, so that we don't have to query for that element repeatedly. And it improves the readability of the code, also.

edited Dec 14, 2011 at 2:10

answered Dec 14, 2011 at 2:04

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

Collectives™ on Stack Overflow

How to make a click on a child element not be considered a click on it's parent in jQuery?

3 Answers 3

5 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Linked

Related