stopPropagation() "Prevents the event from bubbling up the DOM tree" : what does it means?

event-propagation, jquery

Solution

Easy, `stopPropagation` stops any events bubbling up to its container, its container's container etc etc.

Here's a live example: http://jsfiddle.net/5B7sw/

HTML:

<div id="container">
    <button id="propagate">Propagate</button>
    <button id="nopropagate">Do not Propagate</button>
</div>

and js:

$('#container').click(function(){
   console.log('container click') ;
});


$('#propagate').click(function(){
   console.log('propagateclick');
});


$('#nopropagate').click(function(e){
   console.log('nopropagateclick');
    e.stopPropagation();
});

Clicking the button title "propagate" (default behaviour) will write "propagate click" and "containerclick" to the console. Clicking the button which includes a call to `e.stopPropagation()` will not print the "container click" message as propagation up to the container has been halted.

Problem

I don't really understand what e.stopPropagation() do. If I have a link using `return false` to the handler I should get what I want (prevent the default link behaviour, so it doesnt "call" the next href location) : ``` <a id="myLink" href="http://www.google.com">Go to google</a>​ $('#myLink').click(function (e) { alert("No, you don't go to Google"); return false; });​ ``` Adding `e.stopPropagation()` what can I get? Can you give to me a solid example showing to me what `e.stopPropagation()` can do?

Original source