Vanilla JS - How To Stop Sub-Element's OnClick Method From Calling Parent Elements OnClick Method

Question

Having to use VanillaJS (don't ask me why).

Struggling to wrap my head around this simple thing.

Here is my code:

<script>
function chooseImage() {
  alert("chooseImage");
}

function deleteImage() {
  alert("deleteImage");
}
</script>

<style>
body {
  background: black;
}
</style>

<div class="mod-c-tab-col">
    <div class="mod-c-tab-img del-option" onclick="chooseImage()">
        <input type="radio" id="img-1" name="images" checked="">
        <label for="img-1"></label>
        <img src="https://public-assets.envato-static.com/assets/logos/envato_market-a5ace93f8482e885ae008eb481b9451d379599dfed24868e52b6b2d66f5cf633.svg" alt="">
        <button class="mod-del-btn" onclick="deleteImage()">>Delete</button>
    </div><!-- /.mod-c-tab-img -->
</div>

And view it on a codepen here: https://codepen.io/jacksonjack/pen/MWKgQQK

Now two things should happen:

1. user should click image and it should popup with an alert "chooseImage".

This works as expected.

However the second thing does not work as expected.

2. user should click image and it should popup with an alert "deleteImage".

However it shows "deleteImage" then the "chooseImage".

How do I stop this?

Answer 1

This is due to event bubbling. Use event.stopPropagation() to stop the global event object from bubbling at that moment. I would also recommend using js to add your event listener so you can grab the event object as an argument rather than having to access it globally.

function chooseImage() {
  alert("chooseImage");
}

function deleteImage() {
  event.stopPropagation()
  alert("deleteImage");
}

Answer 2

Like I already wrote in my comment, you may use stopPropagation() to stop the bubbling of events.

However, in this case it would suffice to just put the click event from the div to the img , which brings both events to separate siblings.

 function chooseImage() { alert("chooseImage"); } function deleteImage() { alert("deleteImage"); }

 body { background: black; }

 <div class="mod-c-tab-col"> <div class="mod-c-tab-img del-option"> <input type="radio" id="img-1" name="images" checked=""> <label for="img-1"></label> <img src="https://public-assets.envato-static.com/assets/logos/envato_market-a5ace93f8482e885ae008eb481b9451d379599dfed24868e52b6b2d66f5cf633.svg" alt="" onclick="chooseImage()"> <button class="mod-del-btn" onclick="deleteImage()">>Delete</button> </div><.-- /.mod-c-tab-img --> </div>

Answer 3

 function chooseImage() { alert("chooseImage"); } function deleteImage(e) { e.stopPropagation(); alert("deleteImage"); }

 <div class="mod-c-tab-col"> <div class="mod-c-tab-img del-option" onclick="chooseImage()"> <input type="radio" id="img-1" name="images" checked=""> <label for="img-1"></label> <img src="https://public-assets.envato-static.com/assets/logos/envato_market-a5ace93f8482e885ae008eb481b9451d379599dfed24868e52b6b2d66f5cf633.svg" alt=""> <button class="mod-del-btn" onclick="deleteImage(event)">Delete</button> </div><.-- /.mod-c-tab-img --> </div>

Firstly you need to call delete image with event . Then only stopPropagation would work.

<button class="mod-del-btn" onclick="deleteImage(event)">Delete</button>

function deleteImage(e) {
  e.stopPropagation();
  alert("deleteImage");
}