多Modal弹窗点击外部关闭与切换弹窗的冲突解决方法

针对你遇到的弹窗刚打开就被事件冒泡触发关闭，以及多弹窗切换时@click.stop导致功能失效的问题，给你几个实用的解决办法：

方案1：通过事件目标判断避免误触发 #

在关闭逻辑里直接判断点击的目标是不是弹窗内部或者打开按钮，如果是就跳过关闭操作。这种方式不用阻止事件冒泡，多弹窗切换时其他按钮的点击事件也能正常触发。

原生JS示例 #

// 假设弹窗元素和打开按钮的DOM节点已获取
const modalEl = document.querySelector('.modal');
const openBtn = document.querySelector('.open-btn');

function open() {
    active.value = true;
    window.addEventListener('click', close);
}

function close(event) {
    // 点击弹窗内部或打开按钮时，不执行关闭
    if (modalEl.contains(event.target) || event.target === openBtn) {
        return;
    }
    active.value = false;
    window.removeEventListener('click', close);
}

Vue示例 #

<template>
  <button ref="openBtn" @click="open">打开弹窗</button>
  <div ref="modalEl" class="modal" v-if="active">
    <!-- 弹窗内容区域 -->
  </div>
</template>

<script setup>
import { ref } from 'vue';
const active = ref(false);
const openBtn = ref(null);
const modalEl = ref(null);

function open() {
  active.value = true;
  window.addEventListener('click', close);
}

function close(event) {
  // 判断点击目标是否在弹窗内或就是打开按钮
  if (modalEl.value?.contains(event.target) || event.target === openBtn.value) {
    return;
  }
  active.value = false;
  window.removeEventListener('click', close);
}
</script>

方案2：延迟添加window监听（利用事件循环） #

打开弹窗时，用setTimeout把window的点击监听延迟到下一次事件循环执行，这样打开按钮的点击事件已经完成冒泡流程，不会触发刚添加的关闭函数。这个方案逻辑简单，不用额外判断元素。

function open() {
    active.value = true;
    // 延迟0毫秒，让当前点击事件完成冒泡后再添加监听
    setTimeout(() => {
        window.addEventListener('click', close);
    }, 0);
}

function close() {
    active.value = false;
    window.removeEventListener('click', close);
}

方案3：在弹窗内部阻止事件冒泡 #

给弹窗的根元素添加@click.stop，这样点击弹窗内部时不会把事件冒泡到window，而点击弹窗外部会触发window的关闭逻辑。打开按钮不需要加stop，多弹窗切换时其他按钮的点击事件能正常传播。

<template>
  <button @click="open">打开弹窗</button>
  <!-- 给弹窗根元素加@click.stop阻止内部点击冒泡 -->
  <div class="modal" v-if="active" @click.stop>
    <!-- 弹窗内容 -->
  </div>
</template>

<script setup>
import { ref } from 'vue';
const active = ref(false);

function open() {
  active.value = true;
  window.addEventListener('click', close);
}

function close() {
  active.value = false;
  window.removeEventListener('click', close);
}
</script>

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