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
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 html
structure:
<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;});