7

if I've got a floating message box and i'm wondering if clicking paragraph text within that box will also register a click on it's parent element in jQuery or if i have to add click listeners for the child elements as well.

update: here's the basic layout:

<div id='msgbox'>
<p>This is the <span>message</span></p>
</div>

Now if i click the text in the <p> or in the <span> will it still trigger as a click on $('#msgbox') ?

update 2: Can I stop this behavior??

update 3: here's the fiddle i've got going: http://jsfiddle.net/MZtbY/ - now is there a way to stop propagation after it reaches a certain level? so clicking the <p> would be ok, but clicking the <span> would do nothing? - sort of like $('#msgbox :nth-child').click(function(e) {e.stopPropagation();});

Dan
  • 3,750
  • 5
  • 24
  • 38
  • 1
    here's a second thought: is there a way to prevent it if the text inside is dynamic? – Dan Oct 05 '11 at 01:00

3 Answers3

5

Here's an example at jsFiddle

$('#msgbox').click(function(evt){ 
   alert("click on msgbox: "+evt.target); 
});

// stop bubbling for the span only.
$('#msgbox span').click(function(evt) { 
   evt.stopPropagation(); 
});

Note that clicking on the #msgbox <div> (that's the red box in the jsFiddle), or on the first section of the paragraph text will both trigger the event handler on #msgbox; but clicking on the text inside the <span> will not. This is because we've applied a handler directly to the span, and called stopPropagation() on that event to prevent the normal bubbling action.

Update: here's an update to your fiddle that shows the same thing.

Lee
  • 13,462
  • 1
  • 32
  • 45
  • cool. what if the contents are dynamic, and I don't know that it's a `` that's inside it? – Dan Oct 05 '11 at 01:08
  • 1
    Then give it an id, or classname, or select it some other way. It doesn't matter how you make the jquery object - once you have it, bind a click handler, and use stopPropagation. If you're adding the dynamic content *after* you bind your events, then you'll need to use [`.live('click', function(evt){...}; )`](http://api.jquery.com/live/) instead of [`.click(function(evt){...})`](http://api.jquery.com/click/). – Lee Oct 05 '11 at 01:15
  • ok that makes sense, but i'm not certain of how i can select "All Great-Grandchildren" is there a jquery function for that? - on second thought, i think i'm getting away from the original question a bit, so i'll do some digging on this myself. - Thanks for the help @Lee – Dan Oct 05 '11 at 01:22
  • 1
    "All great-grandchildren of #msgbox": `$('#msgbox > * > * > *')`. Check out the [jQuery Selectors doc page](http://api.jquery.com/category/selectors/) for details about all the different jQuery selectors that are available. – Lee Oct 05 '11 at 02:33
3

If you want to stop it from bubbling use 

e.stopPropagation();
aziz punjani
  • 25,586
  • 9
  • 47
  • 56
  • awesome. is there a way to stop propagation after you reach a certain level? so clicking the `

    ` would be ok, but clicking the `` would do nothing?

     – Dan Oct 05 '11 at 01:03
2

By default, events "Bubble" in JavaScript. They fire at the level you trigger and then one at a time through parent elements.

For more on event bubbling: http://www.quirksmode.org/js/events_order.html

To stop it: Prevent "bubbling"?

Community
  • 1
  • 1
Rob Allen
  • 17,381
  • 5
  • 52
  • 70