javascript - How do I prevent a click handler being triggered when a child element is clicked?

Question

I have two div tags, first div is the father and the second div is son Inside the father like this

<div id="father"> 
<div id="son"> </div>
</div>

And I've added an event (onclick) in div father like this

<div id="father" onclick="closeFather()"> 
<div id="son"> </div>
</div>

My question is why the son inherits the father in the event.

I want when I click on the Father div implement the event, but when i click on the son does not implement anything because it does not have any event.

Answer 1

This is caused by a JavaScript trait called event bubbling. By default, your events will 'bubble up' into the DOM.

When clicking a child node, you would automatically trigger a click event for it's parent node(s).

By default, when clicking an element, bubbling happens from the inside out: this means that first the child element's click() event will be trigged, then it's parent, etc.

You can solve the problem by adding a secondary click handler to your child element as well and telling the browser to stop bubbling in a cross-browser compatible way like so (see live example):

<script language="javascript">
    function parentHandler(e) {
        alert('parent clicked');
    };

    function childHandler(e) {
        if (!e) var e = window.event;
        e.cancelBubble = true;
        if (e.stopPropagation) e.stopPropagation();    

        alert('child clicked');

    };    
</script>

<div id="parent" onclick="parentHandler(event);">
    Foo
    <div id="child" onclick="childHandler(event)">
        Bar
    </div>
</div>