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

Question

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?

Answer 1

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.

Answer 2

In your example e.stopPropagation() would do nothing.

e.stopPropagation() may be used in case of nested element to prevent other element from receiving the event.