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

Question

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

这就是我想要达到的目的：

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

 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> 

Answer 2

您也许可以采用一个绝对的内部div，该div具有背景，一定的高度和宽度，与主父div相等，并且具有所有样式，因此单击该div可以关闭父div，而在图像上则不需要做任何事。

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

因此，childdiv应该不显示任何功能。 使用JavaScript，您应该能够通过单击子div来关闭父div。