title: Avoid double function calling on overlaying images?
body: <p>I have one smaller image laying on top of a bigger one, and both are connected on click to a jQuery function.</p>
  
  <p>My problem is when I click the smaller one, the browser first executes the function connected to the smaller one, and then it also executes the function connected to the bigger one.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="outer" style="position: relative; width:200px; height:200px; background:#00f;"&gt;
      &lt;div id="inner" style="position: absolute; top:100px; left:100px; width:50px; height:50px; background:#0f0;"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>$('#outer').click(function(){
      alert('outer');
  })
  
  $('#inner').click(function(){
      alert('inner');
  })
  </code></pre>
  
  <p>Or see jFiddle here: <strong><a href="http://jsfiddle.net/XmG2T/" rel="nofollow">http://jsfiddle.net/XmG2T/</a></strong>.</p>
  
  <p>How do I prevent the browser, when I click the smaller image, from also executing the second function connected to the bigger image?</p>