Vue 3中如何阻止focusin事件冒泡至document？

我正在开发一个Vue 3组件，打包后会被大型项目引用。该项目在document上绑定了focusin事件监听器，对我组件内的a-textarea产生负面影响，且我无权修改这个监听器。

调试发现，移除浏览器事件监听器面板中元素的focus或focusin监听器后，负面影响消失，但仅清空监听器内代码无法解决问题。我判断focusin事件冒泡是问题根源，但Vue文件内的阻止代码总是晚于document上的绑定事件执行，导致无法生效。

我需要实现：a-textarea获焦后阻止focusin冒泡至document，且不影响a-modal外的其他组件。

1. 使用npm create vue@latest创建基础Vue项目（无需额外功能）
2. 在index.html中添加全局事件绑定：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $(document).ready(function() {
    $(document).on('focusin', function(event) {
        console.log('the element received focus: ', event.target);
    });
  })
</script>

3. 在App.vue中添加测试输入框：

<input style="width: 200px;" @focusin.stop="() => { console.log('I can\'t stop it') }" />

核心思路：利用事件捕获阶段优先执行的特性，在组件内部DOM元素上通过原生JS绑定捕获阶段的focusin监听器，提前阻止事件传播，让document上的冒泡阶段监听器无法触发。

具体实现代码（针对你的a-modal场景） #

<template>
  <a-modal v-model:open="isModalVisible" :title="title" @ok="handleOk" @cancel="handleCancel" :zIndex="1500">
    <div ref="textareaWrapper" class="ant-textarea-general" style="height: auto">
      <a-textarea 
        ref="myTextarea" 
        v-model:value="textareaValue" 
        :rows="8" 
        allowClear 
        :maxLength="maxlength"
      ></a-textarea>
    </div>
    <div class="ant-form-extra">
      {{ modalPlaceholder }}
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
import { useModule0Store } from '@/stores/module0';

// 基础变量定义
const isModalVisible = ref(false);
const title = ref('Test Modal');
const textareaValue = ref('');
const maxlength = ref(1000);
const modalPlaceholder = ref('剩余字数统计...');
const textareaWrapper = ref<HTMLDivElement | null>(null);
const myTextarea = ref<any>(null);
let removeFocusBlocker: (() => void) | null = null;

// 初始化状态
const module0Store = useModule0Store();
module0Store.loading = false;

// 模态框回调
const handleOk = () => isModalVisible.value = false;
const handleCancel = () => isModalVisible.value = false;

// 设置阻止冒泡的监听器
const setupBlocker = () => {
  // 获取目标DOM元素（优先取textarea本身，否则用父容器）
  const target = myTextarea.value?.$el || textareaWrapper.value;
  if (!target) return;

  const blocker = (event: FocusEvent) => {
    event.stopPropagation();
  };

  // 绑定捕获阶段的focusin事件
  target.addEventListener('focusin', blocker, true);

  // 返回移除监听器的函数
  return () => target.removeEventListener('focusin', blocker, true);
};

// 监听模态框显示状态
watch(isModalVisible, (isOpen) => {
  if (isOpen) {
    nextTick(() => {
      removeFocusBlocker = setupBlocker();
    });
  } else {
    // 模态框关闭时移除监听器，避免内存泄漏
    removeFocusBlocker?.();
    removeFocusBlocker = null;
  }
});

// 组件卸载时清理监听器
onUnmounted(() => {
  removeFocusBlocker?.();
});
</script>

方案原理 #

事件传播分为三个阶段：捕获阶段→目标阶段→冒泡阶段。

• 全局document上的focusin事件是通过jQuery绑定的，默认在冒泡阶段触发
• 我们通过addEventListener的第三个参数true，在捕获阶段绑定监听器，这个阶段的代码会优先于冒泡阶段执行
• 一旦在捕获阶段调用event.stopPropagation()，事件就不会继续传播到冒泡阶段，document上的监听器自然不会触发

额外注意事项 #

• 如果使用第三方UI组件（如Ant Design Vue的a-textarea），需要通过组件实例的$el属性获取真实DOM元素
• 仅在模态框打开时绑定监听器，关闭时立即移除，不会影响组件外的其他元素
• 可以在浏览器控制台查看事件触发顺序，验证捕获阶段的监听器是否先执行

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