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