jQuery: Stop event bubbling from propagating up the element chain

You may have noticed that sometimes when you click on an element, the click event handler of (one of) the parents are triggered.
Thats because events in Javascript are like bubbles which rise from the lowest element (the one which you clicked) to the top element, the HTML body.
You can prevent the event from rising up the element chain by using jQuery's event.stopPropagation().


$('#some_id').click(function(e) {

do_something();

e.stopPropagation();

});


That's it!

Note: If an element has multiple event handlers, this will only stop the one handler from passing on the event bubble.

[ Source ]