can someone explain how this stopPropagation works?

Question

I was trying to setup this "when you click outside of the element, close it" type of thing using some code I found on Stackoverflow:

$(document).click(function() {
 $('.list-to-hide').hide();
});

$('.show-list-button').click(function(event) {
 event.stopPropagation();
});

Could someone explain the later part with stopPropagation? I don't understand why it's needed.

Thanks! Matt

Savor

Answer 1

Imagine this:

<div>
    DIV
    <span>
        Span
    </span>
<div>

and:

$('div').click(function() { alert('div clicked'); });
$('span').click(function() { alert('span clicked'); });

Check out what happens when you click each one

When you click the span, it happens to also trigger the div because your also clicking the div.

Now if we wanted to alert the span only we need to stop the div click from triggering when we click on the span so we do this:

$('div').click(function() { alert('div clicked'); });
$('span').click(function(e) { alert('span clicked'); e.stopPropagation(); });

See what happens now

Malinowski

That's a really nice and easy to understand demonstration! Really helpful! – Cerussite

Thanks for breaking this down. My mistake was passing the stopPropagation() method inside the parent element. – Catkin

Answer 2

Your example code is missing a vital part:

$(document).click(function() {
    $('.list-to-hide').hide();
});

$('.show-list-button').click(function(event) {
    event.stopPropagation();
    $('.list-to-hide').show();
});

Without the event.stopPropagation(), it would show the list, and then hide it because the .show-list-button is inside the $(document) so both click handlers would fire. event.stopPropagation() basically says only apply this click event to THIS CHILD NODE and don't tell the parent containers anything because I don't want them to react.

Think about it this way - you rent a taxi for $100. The driver gives his company $80. event.stopPropagation() is like telling him to keep all $100 because the company doesn't need to know anything about the ride.

Aldosterone

Okay, that's a good explanation, but say I click on the .show-list-button. Why doesn't the browser decide to first think of it as a document click? Is there some weighing system it uses to decide which function to notify about the click first? – Savor

For more material you'd better see Event order and #2661699 – Friedcake

@Bohemian has no sense of humor and downvoted this answer after he edited it to say "taxi driver" instead of "hooker". I'm sure your mom is proud of your life accomplishments. – Aldosterone

I didn't downvote. That was probably the person who flagged your answer as offensive. – Twelvemo

Hookers are not offensive. That's completely subjective. – Aldosterone

Answer 3

event.stopPropagation(); prevents the event from bubbling up the DOM. Without this line, clicking on .show-list-button the click handler for document will fire also. With it, the document click will not fire.

Scofield

Answer 4

Have you read this ?

http://api.jquery.com/event.stopPropagation/

It prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

Example

Kill the bubbling on the click event.

$("p").click(function(event){
  event.stopPropagation();
  // do something
}); 

Ruperto