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?

if you `return false`, then that's same as `e.preventDefault()` and `e.stopPropagation()` since it's a jQuery handler. — Esailija, Jun 08 '12 at 09:26

score 11 · Accepted Answer · answered Jun 08 '12 at 09:27

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.

Would be nice to know how jQuery team avoid this problem, using the solo preventDefault(); in fact they should use "return false" in some manner, wich call doing the same things as prevent+stoppropagation! This is interessant... — markzzz, Jun 08 '12 at 09:39

score 1 · Answer 2 · answered Jun 08 '12 at 09:26

1

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.

answered Jun 08 '12 at 09:26

strah

6,702
4
33
45

score 0 · Answer 3 · answered Jun 08 '12 at 09:28

0

Its not what you think it is..

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

answered Jun 08 '12 at 09:28

Kshitij

8,474
2
26
34

score 0 · Answer 4 · answered Jun 08 '12 at 09:42

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/

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

4 Answers4