jquery Event.stopPropagation() seems not to work

18,807

Live events don't follow the same event bubbling rules. See the documentation on live event handling.

Quote from reference above:

Live events do not bubble in the traditional manner and cannot be stopped using stopPropagation or stopImmediatePropagation. For example, take the case of two click events - one bound to "li" and another "li a". Should a click occur on the inner anchor BOTH events will be triggered. This is because when a $("li").bind("click", fn); is bound you're actually saying "Whenever a click event occurs on an LI element - or inside an LI element - trigger this click event." To stop further processing for a live event, fn must return false.

Share:
18,807

Related videos on Youtube

morgancodes
Author by

morgancodes

Programmer/artist working on a monster javascript project for a cable television company for the past two and a half years. Meanwhile, I build magical sound experiences for iOS including Thicket, Morton Subotnick's Pitch Painter, and this fun toy payed for by gum. I also like to make geometric sculptures from paper. Future plans include releasing my C++ audio patching engine (build on top of STK) as an open source project, creating the world's most mesmerizing musical video game, building my own programming language, and finding a way to pay for it all.

Updated on June 16, 2020

Comments

  • morgancodes
    morgancodes almost 3 years

    Am I totally missing what this is supposed to do? I expect that if I call stopPropagation() on an event, handlers for that event won't get triggered on ancestor elements, but the example below isn't working that way (in FireFox 3 at least)..

    <script type="text/javascript">
        $("input").live("click", function(event){
            console.log("input click handler called")
            event.stopPropagation()
        });
        $("body").live("click", function(event){
            console.log("body was click handler called. event.isPropagationStopped() returns: " + event.isPropagationStopped());
        })
    </script>
     ...
    <body>
        <input type="text" >
    </body>
    
  • morgancodes
    morgancodes almost 14 years
    Awesome. Thanks so much for the clarificatin.
  • RGBK
    RGBK over 11 years
    I'm asking the same question here: stackoverflow.com/questions/7961418/… the thing is, what does one do when you have to stop propagation on live events, i don't have the choice of removing the live handler as I'm dealing with dynamically loaded elements.