Question

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

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

<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绑定事件处理程序。利用事件对象来防止事件进一步传播到DOM（因此它永远不会到达父级，因此不会触发绑定到它的事件处理程序）。

＆＃13;

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");
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你或许可以采用一个绝对的内部div，它具有背景和一定的高度和宽度，它等于主父div并且具有所有样式，所以点击该div可以关闭父div和图像你不需要做任何事情。

<div Parent><div Childdiv>
</div>
<img>
</div>

所以childdiv应该没有显示任何功能。使用JavaScript，您应该能够通过点击子div来关闭父div。

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

2 个答案: