el-drawer注册全局点击事件无效；el-dialog注册全局点击事件无效

提示：el-drawer或el-dialog注册全局点击事件无效，即抽屉或弹框外点击会触发事件，但抽屉和弹框内点击无反应

目前通过方案2：使用捕获阶段（推荐）解决

---

文章目录

• • 解决方案
  • • [方案1：将事件监听器改为 `document`](#方案1：将事件监听器改为 document)
    • 方案2：使用捕获阶段（推荐）
    • 方案3：检查事件路径
    • [方案4：针对 el-drawer 的特殊处理](#方案4：针对 el-drawer 的特殊处理)
    • [方案5：使用 Vue 的自定义事件（如果 drawer 是子组件）](#方案5：使用 Vue 的自定义事件（如果 drawer 是子组件）)
  • 调试建议

---

这是因为 事件冒泡被阻止 了。el-drawer 组件内部的事件默认不会冒泡到 window，这可能是因为：

1. el-drawer阻止了事件冒泡 （事件修饰符 .stop）
2. 事件目标被判断为不在 window 内
3. 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：检查事件路径

如果上面的方法无效，可以检查事件是否被阻止：

const clearFlag = (event) => {
  console.log('事件触发', event.target)
  console.log('事件路径', event.composedPath())
  // 检查是否被阻止
  console.log('defaultPrevented', event.defaultPrevented)
}

方案4：针对 el-drawer 的特殊处理

import { nextTick } from 'vue'

onMounted(() => {
  nextTick(() => {
    // 获取 drawer 的 DOM
    const drawer = document.querySelector('.el-drawer')
    if (drawer) {
      drawer.addEventListener('click', clearFlag)
    }
    
    // 同时监听 document 作为后备
    document.addEventListener('click', clearFlag)
  })
})

onBeforeUnmount(() => {
  const drawer = 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>

调试建议

const clearFlag = (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 并使用捕获阶段就能解决问题。