How to not activate mother when clicking child?
<p><a href="http://jsfiddle.net/aQb9H/" rel="nofollow">http://jsfiddle.net/aQb9H/</a>
What is the best way to do this, do not activate the parent while on click its child. Now while clicking the child both are activated .</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;head&gt;
&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;script&gt;
$(document).ready(function(){

    $('#child').click(function(){
        $('#output').append('Child is activated ||')
    })

    $('#mother').on('mousedown',function(){
        $('#output').append('Mother is activated ||')
    })


})
&lt;/script&gt;
&lt;/head&gt;

&lt;style&gt;
#mother,#child,#output{
display:block;
color:white;
font-weight:bold;
cursor:pointer;
}
#mother{
width:100px;height:100px;
padding:30px;
margin:20px;
background-color:purple;
}
#child{
width:100px;height:100px;
background-color:orange;
}
#output{
    width:300px;height:100px;
border:2px solid red;
color:black;    
}
&lt;/style&gt;
&lt;body&gt;
    &lt;h1&gt;Click Child, I don't want to activate mother when clicking child&lt;/h1&gt;
&lt;div id='mother'&gt;
    Mother
    &lt;div id='child'&gt;Child&lt;/div&gt;

&lt;/div&gt;
&lt;div id='output'&gt; Output:  &lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
