CODEWITHSUNDEEP
javascriptjqueryjquery-events
xorinzor
xorinzor

Reputation: 6467

No onclick when child is clicked

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?

Upvotes: 23

Views: 35301

Answers (5)

Conrad S
Conrad S

Reputation: 354

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

Upvotes: 9

Johann Burgess
Johann Burgess

Reputation: 606

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

Upvotes: 3

NicB
NicB

Reputation: 362

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>

Upvotes: 4

JaredPar
JaredPar

Reputation: 754555

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

Upvotes: 0

Sampson
Sampson

Reputation: 268324

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

Upvotes: 38

Related Questions