当用户在弹出窗口之外单击时关闭弹出窗口

Question

当用户点击一个 div 时，会出现一个弹出窗口。当他们单击弹出窗口之外的任何位置时，弹出窗口应该关闭。现在，只有当用户在 div 之外单击时，弹出窗口才会关闭。如果用户在弹出窗口出现在屏幕上时单击 div，则弹出窗口不会消失。我认为这是因为 div 本身有一个单击事件会导致弹出窗口出现，因此单击 div 实际上并不会使其消失。

$('div').click(function() {
  $('.popup').show();
});

// Clicking the 'x' hides the pop up
  $('.fa-times').click(function () {
  $('.popup').hide();
  });

$(document).mouseup(function(e) {
  var container = $(".popup");

  var clickedElement = e.target;

  if (!container.is(clickedElement) || clickedElement.className === 'box') {
    container.hide();
  }
});

.box {
  width: 200px;
  height: 200px;
  background-color: blue;
}

.popup {
  border: 2px solid red;
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  width: 200px;
  margin: 0 auto;
  padding: 15px;
  margin-top: 50px;
  background: #eee;
  border-radius: 8px;
  box-shadow: 0 0 10px #999;
  overflow: hidden;
  z-index: 2;
}

.popup .fa-times {
  position: absolute;
  top: 0;
  right: 2%;
}

.popup .fa-times:hover {
  color: #D54444;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
                integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
                crossorigin="anonymous">

<div class="box">
  <div class="popup">
  <i class="fas fa-times"></i>
  </div>
</div>

这是fiddle

我尝试解决此问题的方法是获取单击元素的类名，如果此元素是 div，则将其隐藏。但这没有用。我假设这是因为单击它会导致弹出窗口出现。

我在 stackoverflow 上查看了许多类似的问题，但它们没有帮助。感谢您的任何建议。

Answer 1

也许，像这样？

$('.box').click(function() {
  $('.popup').toggle()
})

$(document).mouseup(function(e) {
  if (e.target.className != 'box')
    $('.popup').hide()
})

https://jsfiddle.net/2bg9e3f6/1/