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

Improve this question
1
  • 1
    here's a second thought: is there a way to prevent it if the text inside is dynamic? Commented Oct 5, 2011 at 1:00

3 Answers 3

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

cool. what if the contents are dynamic, and I don't know that it's a <span> that's inside it?
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){...}; ) instead of .click(function(evt){...}).
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
"All great-grandchildren of #msgbox": $('#msgbox > * > * > *'). Check out the jQuery Selectors doc page for details about all the different jQuery selectors that are available.
3

If you want to stop it from bubbling use 

e.stopPropagation();
Improve this answer

1 Comment

awesome. is there a way to stop propagation after you reach a certain level? so clicking the <p> would be ok, but clicking the <span> would do nothing?
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"?

Improve this answer

1 Comment

great thanks for the tip, and the link.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.