Vanilla JS - 如何阻止子元素的OnClick方法调用父元素的OnClick方法？

Question

不得不使用VanillaJS（不要问我为什么）。

在这个简单的事情上挣扎着想不通。

这是我的代码。

<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>

并在这里的codepen上查看它。https:/codepen.iojacksonjackpenMWKgQQK。

现在应该发生两件事。

1. 用户点击图片，然后弹出 "选择图片 "的提示。

这和预期的一样。

然而，第二件事并不像预期的那样工作，用户应该点击图片，然后弹出 "deleteImage "的警告。

2. 用户应该点击图片，然后弹出 "deleteImage "的警告。

然而，它显示的是 "deleteImage"，然后是 "chooseImage"。

我如何停止这种情况？

Answer 1

这是由于事件冒泡的缘故。 使用 event.stopPropagation() 来阻止全局事件对象在那一刻冒泡。 我还建议使用js来添加你的事件监听器，这样你就可以把事件对象作为一个参数来抓取，而不是必须全局访问它。

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

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

Answer 2

就像我在评论中写的那样，你可以使用 stopPropagation() 来阻止事件的冒泡。

然而，在这种情况下，只需将该事件的 click 事件从 div 至 img，使这两个事件分别成为不同的兄弟姐妹。

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>

首先，你需要用 event. 那么只有 stopPropagation 会工作。

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

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