Prevent execution of parent event handler

I have a tree of divs:

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

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")){

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?


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

function handler(event) {
    // now do your stuff        

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



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

when click on b and c

I have the following htmlstructure:

<a href="">
       <button type="button">Save</button>

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.

        return false;

Leave a Comment