13

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

ShellZero
  • 4,415
  • 12
  • 38
  • 56
Matt
  • 247
  • 1
  • 4
  • 12

4 Answers4

49

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

qwertymk
  • 34,200
  • 28
  • 121
  • 184
8

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.

Bohemian
  • 412,405
  • 93
  • 575
  • 722
AlienWebguy
  • 76,997
  • 17
  • 122
  • 145
  • 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? – Matt Jul 22 '11 at 02:19
  • For more material you'd better see [Event order](http://www.quirksmode.org/js/events_order.html) and http://stackoverflow.com/questions/2661199/event-capturing-vs-event-bubbling/2667743#2667743 – Ghostoy Jul 22 '11 at 03:15
  • 1
    @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. – AlienWebguy Sep 28 '15 at 17:29
  • I didn't downvote. That was probably the person who flagged your answer as offensive. – Bohemian Sep 28 '15 at 18:47
  • Hookers are not offensive. That's completely subjective. – AlienWebguy Sep 28 '15 at 22:40
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.

James Montagne
  • 77,516
  • 14
  • 110
  • 130
1

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
});
Warface
  • 5,029
  • 9
  • 56
  • 82