CODEWITHSUNDEEP
javascriptjquerystoppropagation
Matt
Matt

Reputation: 257

can someone explain how this stopPropagation works?

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

Upvotes: 13

Views: 8707

Answers (4)

SeanCannon
SeanCannon

Reputation: 77986

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.

Upvotes: 8

qwertymk
qwertymk

Reputation: 35284

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

Upvotes: 49

Warface
Warface

Reputation: 5119

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

Upvotes: 1

James Montagne
James Montagne

Reputation: 78660

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.

Upvotes: 3

Related Questions