How to stop events bubbling in jQuery?

Question

How do I stop custom event bubbling in jQuery?

For example I have this code:

$('.myclass').bind('amodaldestroy', function(){
    ....does something.....
})

How do I only allow this to be triggered once on the first element it finds when bubbling? Can I just add return false?

$('.myclass').bind('amodaldestroy', function(){
     ....does something.....
    return false;
})

Answer 1

According to jQuery's documentation:

$('myclass').bind('amodaldestroy'), function(event) {
    ....does something....
    event.stopPropagation();
});

Answer 2

Use event.stopPropagation();

$('.myclass').bind('amodaldestroy', function(e){
    e.stopPropagation();
});

You can also use return false but there is a subtle difference between the two in that returning false also calls event.preventDefault();

Answer 3

For support in IE < 9:

$(".element").click(function(e)
{
    var event = e || window.event;
    event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true);
});

Answer 4

This might not be that great but

return false;

return false will do both stopPropagation and event.preventDefault...

if you want only one you can choose based on your choice

please read this , this is from SO only

return false is effectively both preventDefault and stopPropogation.

preventDefault will prevent the default event from occuring, stopPropogation will prevent the event from bubbling up and return false will do both.

Answer 5

http://api.jquery.com/event.stopPropagation/