如何实现点击父容器隐藏模态框、点击子模态框不触发隐藏

1. 调整HTML结构添加标识类 #

给原有结构加类名方便元素选择：

<main class="container">
  <section class="auth-modal">
    {/* 身份验证表单等内容 */}
  </section>
</main>

2. 基础样式参考 #

/* 铺满全屏的父容器样式 */
.container {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.6);
}
/* 隐藏类，添加后父容器收起 */
.container.hide {
  display: none;
  /* 如需动画可替换为visibility: hidden; opacity: 0; 配合transition使用 */
}
/* 模态框样式 */
.auth-modal {
  width: 420px;
  height: 520px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 8px;
}

3. 交互逻辑实现 #

核心利用事件冒泡机制实现，推荐两种实现方案：

方案1：判断点击目标归属（无副作用，优先推荐） #

通过判断点击元素是否在模态框内部，决定是否触发隐藏，不会影响其他事件冒泡：

const container = document.querySelector('.container')
const modal = document.querySelector('.auth-modal')

container.addEventListener('click', (e) => {
  // 点击目标不在模态框内部时，才执行隐藏
  if (!modal.contains(e.target)) {
    container.classList.add('hide')
  }
})

方案2：阻止模态框点击事件冒泡（写法更简单） #

直接阻断模态框的点击事件向上冒泡到父容器，父容器的点击事件只有点击自身区域时才会触发：

const container = document.querySelector('.container')
const modal = document.querySelector('.auth-modal')

container.addEventListener('click', () => {
  container.classList.add('hide')
})

modal.addEventListener('click', (e) => {
  e.stopPropagation()
})

注意事项 #

• 如果使用Vue/React等框架，逻辑完全一致，只是事件绑定的写法跟随框架规范调整即可
• 隐藏类的样式可根据交互需求自定义，核心逻辑不受影响

内容的提问来源于stack exchange，提问作者hegibo2346