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.

Answer 3

Its not what you think it is..

stop propogation means that the same event will not propogate to its parent tag.

Answer 4

event.stopPropagation() will prevent the event from bubbling up through its ancestors. What this means that any handlers attached to ancestors using .delegate() or .live() matching the child element in question will not fire. Here is a demo to illustrate this fact: http://jsfiddle.net/fSBGC/6/