单击元素外部（但不在内部）时关闭/隐藏元素

我有一个<div>存在于页面上，我需要这样做，以便当用户单击该元素外部时它将隐藏，但如果用户单击元素内的某个位置，那么它应该保留。

我尝试使用
e.stopPropagation();
and
e.preventDefault();

将其添加到该特定 DIV 的点击事件中，但这不起作用。

Thanks!

• 分配所需的事件侦听器（例如"click") to document or window using EventTarget.addEventListener()
• Use 事件目标结合Element.closest()作为否定!- 为了检查 Event.target（发起事件的元素） - 它的自身或最近的祖先是否具有特定的选择器。
• 要控制元素可见性，请创建一个执行必要样式的 CSS 类，并使用元素.classlist添加、删除或切换该类（根据需要）。

const elPopup = document.querySelector("#popup");

addEventListener("click", (evt) => {
  if (!evt.target.closest("#popup")) elPopup.classList.remove("isOpen");
});

#popup {
  padding: 2rem;
  background: gold;
  display: none; /* Hidden popup by default */
}

#popup.isOpen {
  display: block;
}

<div id="popup" class="isOpen">
  Click outside to close me.<br>
  Click inside will do nothing.
</div>

• Never use Event.stopPropagation()除非你真的、真的知道自己在做什么。您的应用程序或第三方代码应该是always通知其上下文中发生的所有事件。

使用示例: 单击外部时关闭弹出模式