Javascript 单击关闭div不工作

我试图让一个“弹出”div在用户点击时消失。“我的按钮”上的这段代码工作正常：

$("#download-1").on("click", function () {
      $("#popupDiv").toggle("slow");
  });

问题是，您只能在单击按钮时使弹出div消失。我试着使用下面的代码片段，让div在你点击它的时候消失，但它不起作用。有人能解释一下原因吗

if ($("#popupDiv").attr("display") == "block") {
      $(":not(#popupDiv)").click(function () {
          $("#popupDiv").toggle("slow");
      });
  }

HTML:

---

这是非常基本的，但是如果您想单击弹出窗口之外的任何位置使其消失，您可以将单击事件附加到

文档

。请参见此处的基本代码段：

$(document).click(e => {
    // hide popup
});

$(".popup").click(e => {
    e.stopPropagation(); // stops propagation to the document click
    // show popup
})

---

这是一个简单的解决方案。你可以试试

$(document).mouseup(function (e){

  var container = $("#popupDiv");//your popupDiv id
  if (!container.is(e.target) && container.has(e.target).length === 0){
    container.hide();
  }

});

您可以这样做：

$('*').click(function(e){
   if(e.target.id == popupDiv || $(e.target).closest('#popupDiv').lenght > 0)
   return;
else
   $("#popupDiv").toggle("slow");

---

有很多答案，但我会告诉你我会如何选择。可能不是最好的做法，但这是我做这件事的首选方式

html

---

发布html。当弹出窗口时，在后台添加透明元素，并将事件侦听器绑定到它<代码>$（“：not（#popupDiv）”）。单击（）-这很可怕，您可能没有意识到，但这样，您就可以放置事件侦听器或每个HTML DOM元素，而不是#popupDiv！这些不会消失，因为覆盖元素会被删除。代码不完整，没有按钮或图像。@ab3d_工作谢谢，我的意思是它看起来不是很优雅，但与最上等的答案相比，这个不会每次“鼠标”时都启动功能整个文档被触发，事件侦听器在元素被删除时从内存中清除（至少在大多数现代浏览器中是这样），这让我毛骨悚然。

$（'*'）。单击（）
$('*').click(function(e){
   if(e.target.id == popupDiv || $(e.target).closest('#popupDiv').lenght > 0)
   return;
else
   $("#popupDiv").toggle("slow");

<span class="trigger">Hey, trigger me!</span>

$(".trigger").click(function() {
  $("body").append("<div class='popUp'>Well hello There</div><div class='overlay'></div>");
  $(".overlay, .possibleCloseBtn").click(function() {
    $(".popUp, .overlay").remove();
  });
});

.popUp {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #CCC;
  z-index: 99;
}

.overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, .2);
  z-index: 98;
}