Prevent click from child firing parent click event

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 开发者_C百科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();
});

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.

try:

e.stopPropagation();
return false; 

in your event handler

$('.popup-content').bind('click', function(e)
{
    e.stopPropagation();
});

or

$('.popup-content').bind('click', function(e)
{
    return false;
});

In your case - it's same, but sometimes you can't do such thing without e.stopPropagation(). For example:

$('.popup-content a').bind('click', function(e)
{
    e.stopPropagation();
    return confirm("Are you sure?");
});

{if(e.target == this ){ return;}});