element-plus组件库中el-drawer无法触发document的click事件的问题el-drawer无法触

el-drawer无法触发document的click事件的问题

问题描述

最近用vue3+element-plus开发一个IM的web页面，需要在el-drawer抽屉组件中展示群成员列表，右键打开操作成员的菜单选项，左键点击可以关闭。问题出现在：可以右键打开菜单，但是点击却关闭不了。

相关代码

onMounted(() => {
  containerRef.value?.addEventListener('contextmenu', handleSessionMenu) //打开菜单
  document.addEventListener('keydown', handleEscEvent) //处理Esc事件
  document.addEventListener('click', closeMenu) //在其他地方的click事件要能关闭菜单
  document.addEventListener('contextmenu', closeMenu) //在其他地方的菜单事件也要能关闭菜单
})

const closeMenu = () => {
  isShowMenu.value = false
}

定位思路

首先确认我add的listener是否被加到document的事件队列中去了。

打开浏览器开发者工具，查看document的click事件的处理函数队列是否有我的closeMenu函数

getEventListeners(document).click;

结果表明事件处理函数确实添加进去了

验证在el-drawer上点击，是不是只有这一个click事件处理不被触发。

我的做法是，把代码中其他地方写的document.addEventListener('click', closeMenu)都加一个简单的不同的log打印。然后分别点击el-drawer和非el-drawer的区域。

结果显示在el-drawer区域上面所有的document的click事件处理函数都不触发。因此我判断在el-drawer上面某个地方阻止了click事件的冒泡行为。

解决方案

网上搜了方案，说是要加一个@click.native，但我是Vue3项目，native已经废弃了，因此不考虑了。方案也很简单：只需要在dl-drawer上面手动添加一个@click事件，并且把事件处理再抛给document处理就可以了。

/**
 * 在el-drawer上所有的document监听的click事件都不会触发，这里要把click事件抛给document
 */
const onClick = () => {
  document.dispatchEvent(new Event('click'))
}

<template>
  <el-drawer
    ...
    @click="onClick"
  >
  ...

打完收工！