How to cancel click event of container div trigger when click elements which inside container in JQuery?

Question

E.g

<div class="container">
  <div class="inside">I am not fire when click me</div>
</div>

$('.container').click(function(){
  // container do something here
});

but,when I click the div inside it also trigger the container's click event because the div is inside the container, so , I need a way to prevent the container event trigger when I click on the inside div!

Thank you very much!!

Answer 1

As a more general solution, you should check e.target in container's click event handler.

$('.container').click(function(e) {
   // If you want to ignore clicks to anything inside the `.container` div:
   if (!$(e.target).hasClass('container')) return;
   // or, if you only want the `.inside` div to not fire the event,
   if ($(e.target).hasClass('inside')) return;

   // container do something here
});

This way you're not preventing propagation of the event, which would break bound live handlers.