Onclick弹出div在外部单击时关闭

<div id="popupDiv">
  <!-- 弹出内容 -->
</div>

#popupDiv {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #ccc;
  display: none; /* 初始状态隐藏 */
}

// 获取弹出div的元素
var popupDiv = document.getElementById("popupDiv");

// 监听点击事件
document.onclick = function(event) {
  // 判断点击的目标元素是否为弹出div以及其子元素
  if (event.target !== popupDiv && !popupDiv.contains(event.target)) {
    // 点击的目标元素不在弹出div内部，关闭弹出div
    popupDiv.style.display = "none";
  }
};

// 监听点击事件，用于显示弹出div
document.getElementById("triggerElement").onclick = function() {
  // 显示弹出div
  popupDiv.style.display = "block";
};