Prevent click from child firing parent click event

Question

I have a selector that binds a click event which will remove the popup. However, I only want the selector to handle the click, instead of the children of the selector to be able to fire the click event.

My code:

<div id="popup">
  <div class="popup-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</div>

When clicking on .popup-content, it will fire the click event when I don't want the children of #popup to do so.

The jQuery Code:

$('#popup').bind('click', function()
{
    $(this).remove();
});

Answer 1

In your event handler for #popup check if e.target == this. i.e.:

$('#popup').bind('click', function(e) {
    if(e.target == this) $(this).remove();
});

Doing this is much easier than binding extra click handlers to all the children.

Answer 2

try:

e.stopPropagation();
return false; 

in your event handler