How to have click event ONLY fire on parent DIV, not children?

jquery events onclick
CaptSaltyJack picture CaptSaltyJack · Feb 7, 2012 · Viewed 222.3k times · Source

I have a DIV with a classed foobar, and a few DIVs inside that DIV that are unclassed, but I suppose they are inheriting the foobar class:

$('.foobar').on('click', function() { /*...do stuff...*/ });

I want that to fire off only when clicking somewhere in the DIV but not on its children DIVs.

Answer

user1106925 picture user1106925 · Feb 7, 2012

If the e.target is the same element as this, you've not clicked on a descendant.

$('.foobar').on('click', function(e) {
  if (e.target !== this)
    return;
  
  alert( 'clicked the foobar' );
});
.foobar {
  padding: 20px; background: yellow;
}
span {
  background: blue; color: white; padding: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='foobar'> .foobar (alert) 
  <span>child (no alert)</span>
</div>

Related questions

onclick event pass <li> id or value

I want to pass <li> id or value in onclick event. here is my exiting code. <li onclick="getPaging(this.value)" id="1" value="1">1</li> <li onclick="getPaging(this.value)" id="2" value="2">2</…

Read More
jQuery - How can I temporarily disable the onclick event listener after the event has been fired?

How can I temporarily disable the onclick event listener, (jQuery preferred), after the event has been fired? Example: After the user clicks on the button and fires this function below, I want to disabled the onclick listener, therefore not firing …

Read More
jquery e.target.hasClass not working

I dynamically create a new div (with a "textbox" class and ID), and some other elements inside of it, and later on in my code I bind that div to the click event, and display the element clicked, like so: $(…

Read More