How to stop events bubbling in jQuery? [duplicate]

问题

This question already has an answer here:

• How do I prevent a parent's onclick event from firing when a child anchor is clicked? 18 answers

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

回答1:

According to jQuery's documentation:

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

回答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();

回答3:

For support in IE < 9:

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

回答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.

回答5:

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

来源：https://stackoverflow.com/questions/4522257/how-to-stop-events-bubbling-in-jquery