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

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

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.

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.