title: Mouse Click Triggering Event of Element below Form being clicked
body: <p>I have a submit button (form) hovering over an image thumbnail which allows the user to delete the image as seen below</p>
  
  <p><img src="https://i.stack.imgur.com/EcA2g.png" alt="example of problem"></p>
  
  <p>The thumbnail (img element) also has an onclick event which triggers a popup displaying the image in full size. Unfortunately, when I click the 'x' button (submit the form), the onclick event for the thumbnail image below also gets triggered so that the user is shown a popup before the page is redirected. How can I prevent this?</p>
  
  <p><strong><em>Additional Info</em></strong></p>
  
  <p>The css for the button is as so:</p>
  
  <pre><code>.delete_image_button
  {
      position:               absolute;
      top:                    0px;
      right:                  0px;
      z-index:                1;
  }
  </code></pre>