title: Vanilla JS - How To Stop Sub-Element's OnClick Method From Calling Parent Elements OnClick Method
body: <p>Having to use VanillaJS (don't ask me why).</p>
  
  <p>Struggling to wrap my head around this simple thing.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;script&gt;
  function chooseImage() {
    alert("chooseImage");
  }
  
  function deleteImage() {
    alert("deleteImage");
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  body {
    background: black;
  }
  &lt;/style&gt;
  
  &lt;div class="mod-c-tab-col"&gt;
      &lt;div class="mod-c-tab-img del-option" onclick="chooseImage()"&gt;
          &lt;input type="radio" id="img-1" name="images" checked=""&gt;
          &lt;label for="img-1"&gt;&lt;/label&gt;
          &lt;img src="https://public-assets.envato-static.com/assets/logos/envato_market-a5ace93f8482e885ae008eb481b9451d379599dfed24868e52b6b2d66f5cf633.svg" alt=""&gt;
          &lt;button class="mod-del-btn" onclick="deleteImage()"&gt;&gt;Delete&lt;/button&gt;
      &lt;/div&gt;&lt;!-- /.mod-c-tab-img --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And view it on a codepen here: <a href="https://codepen.io/jacksonjack/pen/MWKgQQK" rel="nofollow noreferrer">https://codepen.io/jacksonjack/pen/MWKgQQK</a></p>
  
  <p>Now two things should happen:</p>
  
  <ol>
  <li>user should click image and it should popup with an alert "chooseImage".</li>
  </ol>
  
  <p>This works as expected.</p>
  
  <p>However the second thing does not work as expected.</p>
  
  <ol start="2">
  <li>user should click image and it should popup with an alert "deleteImage".</li>
  </ol>
  
  <p>However it shows "deleteImage" then the "chooseImage".</p>
  
  <p>How do I stop this?</p>