How to prevent child from affecting the parent

Question

How to prevent the CHILD element from affecting the PARENT element?

jQuery:

$("#parent").click(function() {
    alert('parent clicked');
});
$("#child").click(function() {
    alert('child clicked');
});

HTML:

<div id="parent">
    click me - parent
    <div id="child">click me - child</div>
</div>

If you click the child, the parent is also activated and we have two alerts.

So how can I prevent the child from affecting the parent?

Answer 1

event.stopPropagation()

$("#child").click(function(event) {

    event.stopPropagation();

    alert('child clicked');
});

Calling event.stopPropagation() will stop the event from bubbling up the DOM tree.

Answer 2

This is called event bubbling or event propagation. This can be prevented by adding e.stopPropagation() in your code. If you also want to stop the default behavior you can simply do: return false;.

return false; basically does both: e.stopPropagation() and e.preventDefault(). Which can be useful if you are using <a> tags for example and you want to prevent the page navigating away after a click.