Vue弹窗遮罩层：仅监听点击事件且不影响页面滚动的实现方案

方案1：pointer-events配合事件委托（最简洁推荐） #

这个方法通过让遮罩层不拦截鼠标事件，同时监听全局点击判断是否关闭弹窗，完全避免复杂DOM操作。

1. 修改遮罩层CSS，添加pointer-events: none;：

.cover {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

2. 在Vue组件中监听全局点击事件，判断点击区域是否在弹窗外部：

<template>
  <div v-if="showModal">
    <div class="cover"></div>
    <div class="modal" ref="modal">
      <!-- 弹窗内容 -->
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
const showModal = ref(false);
const modal = ref(null);

const handleClickOutside = (e) => {
  if (modal.value && !modal.value.contains(e.target)) {
    showModal.value = false;
  }
};

onMounted(() => document.addEventListener('click', handleClickOutside));
onUnmounted(() => document.removeEventListener('click', handleClickOutside));
</script>

• 遮罩层的pointer-events: none会让所有鼠标事件穿透到下方页面，页面就能正常滚动。
• 通过ref获取弹窗元素，判断点击目标是否在弹窗内部，实现点击外部关闭的逻辑。

方案2：不使用pointer-events，通过事件冒泡控制+滚动透传 #

如果不想依赖pointer-events，可以用事件阻止冒泡配合手动滚动透传来实现：

1. 保持遮罩层CSS不变，给弹窗设置更高层级：

.cover {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}
.modal {
    position: fixed;
    z-index: 20;
    /* 弹窗定位、宽高等样式 */
}

2. Vue组件中处理点击和滚动：

<template>
  <div v-if="showModal">
    <div class="cover" @click="showModal = false" @wheel="handleWheel"></div>
    <div class="modal" @click.stop>
      <!-- 弹窗内容 -->
    </div>
  </div>
</template>

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

const handleWheel = (e) => {
  e.preventDefault();
  // 手动控制页面滚动，兼容不同浏览器
  const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  document.body.scrollTop = scrollTop + e.deltaY;
  document.documentElement.scrollTop = scrollTop + e.deltaY;
};
</script>

• 弹窗的@click.stop阻止点击事件冒泡到遮罩层，确保点击弹窗内部不会触发关闭。
• 遮罩层的@wheel监听滚动事件，手动将滚动行为传递给页面滚动元素，实现页面滚动。

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