Prevent execution of parent event handler

Question

I have a tree of divs:

<div id="a" onclick="func">
    <div id="b" onclick="func">
         <div id="c" onclick="func">
         </div>
    </div>
</div>

When a click is made on a div it makes it's children invisible - ie click on "a" will turn "b" and "c" invisible.

function func{
   if ($(childId).hasClass("visible")){
    $(childId).removeClass("visible");
    $(childId).addClass("invisible");
}

The problem is: a click on "b" will call "a"'s click and make "b" and "c" invisible. How do I disable the click on "a" using jQuery?

thanks

score 60 · Accepted Answer · edited Apr 06 '17 at 15:36

60

You can add a handler for the child that will prevent the click event from propagating up:

function handler(event) {
    event.stopPropagation();
    // now do your stuff        
}
$('#a').add('#b').click(handler);

This way clicks to '#b' will not propagate to '#a'. Neither will clicks to '#c' go to '#b', and hence not to '#a'.

edited Apr 06 '17 at 15:36

illright

answered Sep 09 '09 at 09:43

jrharshath

This is pretty cool, even works with $(".clickyClass a").click(function(e) {e.stopPropagation();}); assuming .clickyClass has a click handler – daveagp Jul 26 '11 at 15:00
1

should this also prevent from bootstrap `data-toggle="collapse"` on parent from working? because i try and fail :( – Tomer W Dec 31 '14 at 06:12

score 11 · Answer 2 · answered Sep 09 '09 at 09:39

11

use

Stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of the event.

when click on b and c

answered Sep 09 '09 at 09:39

rahul

score 1 · Answer 3 · answered Aug 04 '21 at 12:32

I have the following htmlstructure:

<a href="http://example.com">
    <div> 
       <button type="button">Save</button>
    </div>
</a>

and I want to prevent new page being opened when button is clicked.

I found that stopPropagation alone is not enough. The handler should also return false.

$('button').click(function(event){
        event.stopPropagation();
        save();
        return false;
});

3 Answers3