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

[lionking2]

Hi

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.

[mrhoo]

The child doesn't inherit the handler- the parent 'hears' any click event in its bounds, which includes its child nodes.

You can write a handler that examines the event target or srcElement and cancels the event bubbling if the origin is not the parent element.