If a nested element fires an event, dont let the container handle it
<p>I have a div that contains another div.
If the user clicks the inner div I only want the eventhandler attached to this element get executed. Right now first the eventhandler of the inner element and then that of the outer element gets executed. Is there a way to change this?</p>

<pre><code>    &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Demo&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
 &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
     $(document).ready(function(){
       $("#containerElement").click(function(event){
         alert("This comes from container");
       });

      $("#innerElement").click(function(event){
         alert("This comes from inner element");
       });
     });
   &lt;/script&gt;


   &lt;div id="containerElement" &gt;
   This is the container
     &lt;div id="innerElement" &gt;
   This is the inner element


   &lt;/div&gt;

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