Vue3 document.removeEventListener('click',evernInfo) 没运行, 请教?

<div @click='drawerPosition'></div>


const drawerVisible = ref<boolean>(false)  // 抽屉可见



  function eventInfo(){
    console.log( drawerVisible.value) // 这里只打印出来 true, 而没有 false
  }
  function drawerPosition(){
    if(!drawerVisible.value){
      drawerVisible.value = true
      document.addEventListener('click',eventInfo)
    }else{
      drawerVisible.value = false
      document.removeEventListener('click',eventInfo) // 这里没运行?
    }
  }
估计是 div上 click 与监听冲突?,要怎么解决这种需求

document.addEventListener('click',eventInfo)
和
document.removeEventListener('click',eventInfo)
只是添加和移除click事件,这时不会触发click事件, 不会执行eventInfo函数.
你点击div之后能执行eventInfo函数，是因为点击事件冒泡到document上,触发了document上的click事件

你drawerVisible.value = false之后用document.removeEventListener('click',eventInfo)移除click事件后,document就没click事件了, 就不会再执行eventInfo函数输出false了.
你要输出false可以在document.removeEventListener('click',eventInfo)之后用 eventInfo() 直接调用一次eventInfo()

  function drawerPosition(){
    if(!drawerVisible.value){
      drawerVisible.value = true
      document.addEventListener('click',eventInfo)
    }else{
      drawerVisible.value = false
      document.removeEventListener('click',eventInfo) // 这里没运行?
      eventInfo()  //直接调用一次eventInfo()
    }
  }

点击div，drawerVisible.value为true时执行else分支移除了document的click事件，所以不会再执行eventInfo事件处理函数打印信息，实际drawerVisible.value的值已经为false

直接给document加click，不要移除，根据drawerVisible.value的值执行需要的操作

<div onclick='drawerPosition()'>drawerPosition</div>
<script>
    const drawerVisible = { value: false };

    document.addEventListener('click', eventInfo)
    function eventInfo() {
        console.log(drawerVisible.value) 
        if (drawerVisible.value) {
            //true todo
        }
        else {
            //false todo
        }
    }
    function drawerPosition() {
        drawerVisible.value = !drawerVisible.value;
    }
</script>

代码改成如下试试，给div添加一个class属性，然后根据属性获取到元素，调用元素的添加和移除监听事件

<div @click='drawerPosition' class="btn"></div>
 
 
const drawerVisible = ref<boolean>(false)  // 抽屉可见
 
 
 var btn = document.querySelector('.btn');
  function eventInfo(){
    console.log( drawerVisible.value) // 这里只打印出来 true, 而没有 false
  }
  function drawerPosition(){
    if(!drawerVisible.value){
      drawerVisible.value = true
      btn.addEventListener('click',eventInfo,false)
    }else{
      drawerVisible.value = false
      btn.removeEventListener('click',eventInfo,false) // 这里没运行?
    }
  }

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632