Fire click event for only innermost element in jQuery

Question

I'm trying to fire a click event on the innermost element in the HTML tree, but since there is a click even tied to its parent container, both events are fired, which is not what I need. I have fixed this before with stopPropagation(), but I can't seem to get it to work today.

jQuery('#parent li').click(function() {
    jQuery(this).children('.contained').slideDown();
});
jQuery('.contained').click(function() {                 
    Query(this).slideUp();
});

and let's say here is our HTML:

<ul id="parent">
    <li>
        click to show more
        <p class="contained">click to hide</p>
    </li>
</ul>

I believe this won't validate since it has a p contained within an li, but let's ignore that momentarily for simplicity's sake. How can I have the inner element slideUp() without have the parent click even trigger it to slideDown() immediately after?

`Query` should read `jQuery` I believe. Probably you missed it out when copying code around but just noting that anyway. — Fabrício Matté, Jan 21 '13 at 22:33

score 4 · Accepted Answer · edited May 23 '17 at 12:14

4

return false to stop the bubbling:

jQuery('.contained').click(function() {                 
    Query(this).slideUp();
    return false;
});

Note that returning false also prevent the default behavior of the event. Read more here.

Or use the event object's stopPropagation function:

jQuery('.contained').click(function(e) {                 
    Query(this).slideUp();
    e.stopPropagation();
});

edited May 23 '17 at 12:14

Community

1
1

answered Jan 21 '13 at 22:32

gdoron

147,333
58
291
367

The second method is how I typically do this, but I'm getting errors that object has no stopPropagation(). Returning false on the other hand works beautifully. – Russell Strauss Jan 21 '13 at 22:36
@RussellStrauss, about the `stopPropagation` you just most probably have a typo error, or you forgot to declare the event object at the "function declaration" – gdoron Jan 21 '13 at 22:38
This doesn't seem to work for divs created dynamically. Not sure what to do. – Yster Jan 08 '15 at 13:46

score 0 · Answer 2 · answered Jan 21 '13 at 22:34

The answer is to stop the propagation of the event. You can use stopPropagation and its twin, stopImmediatePropagation to do this or you can both stop propagation and prevent the default action by returning false from the handler. The stopPropagation method will prevent event bubbling, that is, the propagation of the event up the DOM tree. The stopImmdiatePropagation will do that but also prevent other handlers at the same level from firing. Returning false is equivalent to using stopPropagation and preventDefault on the event.

score 0 · Answer 3 · answered Jan 21 '13 at 22:37

Two ways to do it, stop the propagation or combine the two click handlers and adjust code according to event.target

Target method:

jQuery('#parent li').click(function(event) {
     var $tgt=jQuery(event.target)
    if (!$tgt.is('.contained') ){
         jQuery(this).children('.contained').slideDown();
    }else{
       $tgt.slideUp();
    }   
});

Fire click event for only innermost element in jQuery

3 Answers3