js 点击空白区域触发事件

// HTML 部分
<div id="container">
  <div id="popup">这是一个弹出框</div>
</div>

// CSS 部分
#container {
  position: relative;
  width: 300px;
  height: 200px;
  background-color: lightgray;
}

#popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: white;
  border: 1px solid black;
}

// JavaScript 部分
document.addEventListener('click', function(event) {
  // 检查点击的元素是否是 #popup 或者它的子元素
  if (!event.target.closest('#popup')) {
    // 如果不是，则触发关闭弹出框的逻辑
    document.getElementById('popup').style.display = 'none';
    console.log('点击了空白区域');
  }
});

// 显示弹出框的按钮（可选）
document.getElementById('showPopupButton').addEventListener('click', function() {
  document.getElementById('popup').style.display = 'block';
});

解释说明

1. HTML 部分:

   • #container 是一个包含弹出框的容器。
   • #popup 是实际的弹出框。

2. CSS 部分:

   • #container 设置了一个相对定位的容器，宽度和高度分别为 300px 和 200px，并设置了背景颜色为浅灰色。
   • #popup 设置了一个绝对定位的弹出框，居中显示在容器内，并设置了白色背景和黑色边框。

3. JavaScript 部分:

   • 使用 document.addEventListener('click', ...) 监听整个文档的点击事件。
   • event.target.closest('#popup') 用于检查点击的元素是否是 #popup 或其子元素。如果不是，则隐藏弹出框并输出一条日志信息。
   • 可选部分展示了如何通过按钮来显示弹出框。

这样设置后，当用户点击页面上的空白区域时，弹出框会自动隐藏。