Catch click event on any element inside a div

jquery, onclick

Solution

You can do something like this:

$('#container').on('click', function (event) {
  if (event.target != this) {
    alert('You clicked a descendent of #container.');
  } else {
    alert('You actually clicked #container itself.');
  }
});

This checks to see if the element that initiated the click event is the same exact one it's attached to.

Problem

I have a `div` that contains a bunch of elements. This `div` will be hidden (animated `fadeOut()`) if the screen size is smaller than 767px. But if the user clicks on any of the element inside this `div`, I want to stop the `fadeOut()`. But as how I see it right now, I'll have to add a click event for each element I have inside this `div`. Isn't there a more elegant way to catch all click events inside a `div`?

Original source