title: Jquery - fire click event only on the top top layer and not on both
body: <p>When click on the <code>Child</code>, <code>Parent</code> and <code>Child</code> are firing the <code>alert</code>.</p>
  
  <p>Ho can I make only the <code>Child</code> to Alert when I click on it?</p>
  
  <pre><code>&lt;div id="Parent" style="width:300px;height:100px;border:solid 1px red;"&gt;
      Parent
      &lt;div id="Child" style="width:300px;height:50px;border:solid 1px green;"&gt;
          Child
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  $(document).ready(function(){
      $("#Child").click(function(){alert('child')})
      $("#Parent").click(function(){alert('Parent')})
  })
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/WAYgL/" rel="nofollow">http://jsfiddle.net/WAYgL/</a>
  If you click in this example on the <code>Child</code> both of the alerts will be fired how can I prevent from the <code>Parent</code> to alert</p>