javascript - 单击子 onclick 时忽略父 onclick，仅使用 Javascript

Question

我尝试做的一个很好的例子是，想想 instragram。当您单击一张照片时，它会打开一个带有该照片和灰色背景的窗口。如果单击灰色背景中的任意位置，图片将关闭，但是如果单击图片，图片将保留在窗口中。

这就是我想要实现的目标:

<div class="overlay_display_production_list_background" id="overlay_display_production_list_background_id" onclick="this.style.display = 'none'">
    <table class="table_production_availability" id="table_production_availability_id" onclick="this.parentElement.style.display = 'block'">
    </table>

</div>

但是这不起作用。我如何让它工作，我只想要纯 java 脚本。

谢谢

Answer 1

避免内部事件属性(如 onclick)。使用 JavaScript 绑定(bind)您的事件处理程序。利用事件对象来防止事件在 DOM 中进一步传播(因此它永远不会到达父级，因此不会触发绑定(bind)到它的事件处理程序)。

document.querySelector("div").addEventListener("click", parent);
document.querySelector("div div").addEventListener("click", child);

function parent(event) {
  console.log("Parent clicked");
}

function child(event) {
  event.stopPropagation();
  console.log("Child clicked");
}

div {
  padding: 2em;
  background: red;
}

div div {
  background: blue;
}

<div>
  <div>
  </div>
</div>