can someone explain how this stopPropagation works?

javascript jquery stoppropagation

Matt · Jul 22, 2011 · Viewed 7.5k times · Source

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

Imagine this:

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

and:

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

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(); });