Prevent execution of parent event handler Prevent execution of parent event handler jquery jquery

Prevent execution of parent event handler


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'.


use

event.stopPropagation()

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


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;});