Question

166

No onclick when child is clicked

rated 0 times [ 172] [ 6] / answers: 1 / hits: 31302 / 12 Years ago, fri, may 11, 2012, 12:00:00

I have the following html code:

<div class=outerElement>

    <div class=text>

     Lorem ipsum dolar sit amet

    </div>

    <div class=attachment>

      <!-- Image from youtube video here -->

    </div>

</div>

And I have a jQuery onclick event on the .outerElement however, I don't want the .outerElement onclick event to be called when I click on the attachment, is there some way to prevent this or to check which element is clicked?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

viridianaw

Add To Favorites

Follow

Total Points: 154

Total Questions: 94

Total Answers: 89

Location: South Georgia

Member since Sun, Aug 8, 2021

3 Years ago

answered 12 Years ago kourtney · Accepted Answer

Use event.stopPropagation() on the child element.

$(.attachment).on(click, function(event){

  event.stopPropagation();

  console.log( I was clicked, but my parent will not be. );

});

This prevents the event from bubbling up the DOM to the parent node.

Also part of the event object is the target member. This will tell you which element triggered the event to begin with. However, in this instance, stopPropagation appears to be the best solution.

$(.outerElement).on(click, function(event){

  console.log( event.target );

});