在div及其按钮之外单击时关闭div

<div id="myDiv">
  <!-- div内容 -->
  <button id="myButton">关闭</button>
</div>

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

// 获取div和按钮元素
var myDiv = document.getElementById("myDiv");
var myButton = document.getElementById("myButton");

// 添加按钮点击事件监听器
myButton.addEventListener("click", function() {
  myDiv.style.display = "none"; // 点击按钮时隐藏div
});

// 添加窗口点击事件监听器
window.addEventListener("click", function(event) {
  if (event.target == myDiv) {
    myDiv.style.display = "none"; // 点击div之外的区域时隐藏div
  }
});