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

Question

<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 与监听冲突?,要怎么解决这种需求

Answer 1

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()
    }
  }