No onclick when child is clicked

Question

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?

possible duplicate of [How to prevent a click() event through an internal div to parent div in jQuery?](http://stackoverflow.com/questions/7835775/how-to-prevent-a-click-event-through-an-internal-div-to-parent-div-in-jquery) and [How do I prevent a parent's onclick event from firing when a child anchor is clicked?](http://stackoverflow.com/questions/1369035/how-do-i-prevent-a-parents-onclick-event-from-firing-when-a-child-anchor-is-cli) and [How can I stop an onclick event from firing for parent element when child is clicked?](http://stackoverflow.com/q/985389/218196). — Felix Kling, May 11 '12 at 15:37
Sorry, I did a few searches in both google and stackoverflow but couldnt find any results that could help me. — xorinzor, May 11 '12 at 15:48

score 36 · Accepted Answer · answered May 11 '12 at 15:35

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

Conrad S · Answer 2 · 2022-01-28T09:29:28.677

I'm not sure what the performance implications of allowing the propagation from the child elements, but I solved this by comparing event.target and event.currentTarget:

onClick={(event) => {
  if (event.target === event.currentTarget) {
     console.log('Handle click');
  }
}}

This is React ^ More generalized javascript code would be:

$('.outerElement').click(function(event) {
  if (event.currentTarget !== event.target) {
    return;
  }
  // Handle event
});

You can also filter out specific element types like so:

$('.outerElement').click(function(event) {
  if (['input', 'select', 'option'].indexOf(event.target.localName) >= 0) {
    return;
  }
  // Handle event
});

score 4 · Answer 3 · answered Dec 16 '16 at 06:38

This works without jQuery

<div class="outerElement">
    <div class="attachment">Hello</div>
</div>

<script type="text/javascript">
document.getElementsByClassName('outerElement').onclick = function(){

    alert('You clicked on parent');

}
document.getElementsByClassName('attachment').onclick = function(){

    event.stopPropagation();
    alert('You clicked on child');

}
</script>

score 4 · Answer 4 · answered Mar 06 '18 at 05:39

4

Simply setting onclick="event.stopPropagation();" on the children will do.

answered Mar 06 '18 at 05:39

Johann Burgess

580
6
17

score 0 · Answer 5 · answered May 11 '12 at 15:37

0

I'm not sure if you can prevent the event from firing when the attachment item is clicked but you can certainly filter for it

$('.outerElement').click(function() {
  if ($(this).hasClass('attachment')) {
    return;
  }
  // Handle event
});

answered May 11 '12 at 15:37

JaredPar

733,204
149
1,241
1,454

No onclick when child is clicked

5 Answers5

Linked