提示：el-drawer或el-dialog注册全局点击事件无效，即抽屉或弹框外点击会触发事件，但抽屉和弹框内点击无反应
目前通过方案2：使用捕获阶段（推荐）解决
文章目录
- 解决方案
- 方案1：将事件监听器改为 `document`
- 方案2：使用捕获阶段（推荐）
- 方案3：检查事件路径
- 方案4：针对 el-drawer 的特殊处理
- 方案5：使用 Vue 的自定义事件（如果 drawer 是子组件）
- 调试建议
这是因为事件冒泡被阻止了。el-drawer组件内部的事件默认不会冒泡到window，这可能是因为：
- el-drawer阻止了事件冒泡（事件修饰符
.stop） - 事件目标被判断为不在
window内 - el-drawer的层叠上下文导致事件被拦截
解决方案
方案1：将事件监听器改为document
onMounted(()=>{document.addEventListener("click",clearFlag)})onBeforeUnmount(()=>{document.removeEventListener("click",clearFlag)})方案2：使用捕获阶段（推荐）
onMounted(()=>{document.addEventListener("click",clearFlag,true)// 第三个参数 true 表示捕获阶段})onBeforeUnmount(()=>{document.removeEventListener("click",clearFlag,true)})方案3：检查事件路径
如果上面的方法无效，可以检查事件是否被阻止：
constclearFlag=(event)=>{console.log('事件触发',event.target)console.log('事件路径',event.composedPath())// 检查是否被阻止console.log('defaultPrevented',event.defaultPrevented)}方案4：针对 el-drawer 的特殊处理
import{nextTick}from'vue'onMounted(()=>{nextTick(()=>{// 获取 drawer 的 DOMconstdrawer=document.querySelector('.el-drawer')if(drawer){drawer.addEventListener('click',clearFlag)}// 同时监听 document 作为后备document.addEventListener('click',clearFlag)})})onBeforeUnmount(()=>{constdrawer=document.querySelector('.el-drawer')if(drawer){drawer.removeEventListener('click',clearFlag)}document.removeEventListener('click',clearFlag)})方案5：使用 Vue 的自定义事件（如果 drawer 是子组件）
<!-- 父组件 --> <template> <ChildDrawer @drawer-click="clearFlag" /> </template> <!-- 子组件 drawer 内部 --> <template> <el-drawer> <div @click="$emit('drawer-click')"> <!-- 内容 --> </div> </el-drawer> </template>调试建议
constclearFlag=(event)=>{console.log('事件触发',{target:event.target,currentTarget:event.currentTarget,eventPhase:event.eventPhase,// 1: 捕获, 2: 目标, 3: 冒泡bubbles:event.bubbles,// 是否冒泡defaultPrevented:event.defaultPrevented,composed:event.composed,// 是否能跨越 Shadow DOM})}推荐先用方案1或方案2，大多数情况下将window改为document并使用捕获阶段就能解决问题。
