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

Answer 1

try:

e.stopPropagation();
return false; 

in your event handler

Answer 2

$('.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?");
});

Answer 3

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

Answer 4

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.