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.