CODEWITHSUNDEEP
jqueryevent-propagation
markzzz
markzzz

Reputation: 47975

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

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?

Upvotes: 5

Views: 3226

Answers (4)

Aditya Manohar
Aditya Manohar

Reputation: 2274

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/

Upvotes: 0

Kshitij
Kshitij

Reputation: 8614

Its not what you think it is..

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

Upvotes: 0

Jamiec
Jamiec

Reputation: 136124

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.

Upvotes: 11

strah
strah

Reputation: 6732

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.

Upvotes: 1

Related Questions