vue3 element-plus drawer 中的click 监听事件

发现在 element-plus drawer 的组件中，在drawer dom 内部 无法捕捉到 document.addEventListener(click,)事件
在drawer dom 外部可以捕捉到 click
请教怎么才能 捕捉drawer dom内部的 click

现在我在 drawer dom 里用 富文编辑器 也用不了, wangeditor 组件要监听事件,

你好，我刚才看了看是对的， 监听不到，因为element-plus源码内部阻止冒泡了，

你如果需要全局拦截处理， 那可以封装对话框，在对话框内部监听处理，之后可以通过过事件总线的方式告诉上面的主应用

<template>
  <div>
<el-drawer
      ref="childFormRef"
      id="childFormRef"
      v-model="drawer"
      title="I'm outer Drawer"
      size="50%"
      @click="refclick"
    >
      <div>
        <el-button @click="refclick">Click me!</el-button>
      </div>
    </el-drawer>
  <el-button
      type="primary"
      @click="drawer = true"
    >
      open
    </el-button>
  </div>
</template>
<script lang="ts" setup>
import { ref, nextTick } from "vue";

const drawer = ref(false);

const childFormRef: any = ref<InstanceType<typeof homeCompant>>(); // 实例化

let refclick = (e) => {
  nextTick(() => {
    // childFormRef.value.close();
    console.log(childFormRef.value, "==childFormRef.value"); // 调用子组件的 save 函数

    childFormRef.value.drawerRef.addEventListener("click", (res) => {
      console.log(res, "==res");
    });
  });
};
</script>

有另一种思路，自己写一个drawer组件，element-plus的drawer组件写起来也不难

如果用的是vue，最好还是使用@click来监听点击事件
你的目的是通过监听的形式拿到drawer内的未知元素的click吗

methods: {
    clickfun(e) {
       e.target //是你当前点击的元素
       e.currentTarget //是你绑定事件的元素
        //获得点击元素的前一个元素
        e.currentTarget.previousElementSibling.innerHTML
        //获得点击元素的第一个子元素
        e.currentTarget.firstElementChild
        //获得点击元素的下一个元素
        e.currentTarget.nextElementSibling
        // 获得点击元素中id为string的元素
        e.currentTarget.getElementById("string")
        //获得点击元素的class属性
        e.currentTarget.getAttributeNode('class')
        // 获得点击元素的父级元素
        e.currentTarget.parentElement
        // 获得点击元素的前一个元素的第一个子元素的HTML值
        e.currentTarget.previousElementSibling.firstElementChild.innerHTML
   }
}

window.onload = function(){
    var read = document.querySelectorAll("span");
    var drawerShow = document.querySelector(".drawer-show");

    read[0].addEventListener("click",show,false);

    read[1].addEventListener("click",hide,false);
    
    function show(){
        drawerShow.style.display = "block";
        read[0].style.display = "none";
        read[1].style.display = "block";
    }

    function hide(){
        drawerShow.style.display = "none";
        read[0].style.display = "block";
        read[1].style.display = "none";
    }
}

————————————————
版权声明：本文为CSDN博主「男孩子小杨」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_43495629/article/details/87277095