title: How can I stop an onclick event from firing for parent element when child is clicked?
body: <p>I'm having two issues with onclick events, they are somewhat similar so I'll ask them both here.</p>
  
  <p>First:</p>
  
  <p>I have a checkbox in a div. The input has an onchange function and the div has an onclick function.</p>
  
  <pre><code>&lt;div onclick="doSomething()"&gt;
       &lt;input type="checkbox" onchange="doSomethingElse()" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is when I check/uncheck the checkbox both doSomething() and doSomethingElse() fire. Any ideas of how to stop this from occuring? I've tried doing onchange="doSomethingElse(event)" and the in doSomethingElse(e) function I had e.stopPropagation(); and this did not work.</p>
  
  <p>Second:</p>
  
  <p>I have an image in a div. The div has an onclick function but the image does not. The image is, purposely, larger than the div and overflows outside the div.</p>
  
  <pre><code>-----------------------
  |        image        |
  |   ---------------   |
  |   |     div     |   |
  |   |             |   |
  |   ---------------   |
  |                     |
  -----------------------
  </code></pre>
  
  <p>I only want the onclick to fire if the user clicks within the bounds of the div box. However, the onclick event also fires if you click on a part of the image that has overflowed to the outside of the div... Any ideas?</p>
  
  <p>The first question is more important to me than the second. But if someone can answer both that would be awesome!</p>
  
  <p>Thanks in advance for your help,<br/>
  Matt</p>