js点击div之外的地方控制div隐藏

import React, { useRef , useEffect } from 'react';

const _REF = {
  _dom:null
}
export default function Example() {
  const _ref = useRef(_REF)

  const lisener = (e) => {
    console.log("点击document")
    if(!_ref.current._dom.contains(e.target)){
        console.log("点击vdom之外的地方")
    }
  }
  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    document.addEventListener("click",lisener,false)
    return ()=>{
      document.removeEventListener("click",lisener)
    }
  });

  return (
    <div className="parent" onClick={()=>{console.log('点击parent')}}>
     <div onClick={()=>{
       console.log("是在点击vdom")
       e.stopPropagation()
     }} className="vdom" ref={(e)=>{_ref.current._dom = e}}></div>
    </div>
  );
}

• 这是我在阻止事件冒泡时遇到的问题。 document绑定上点击事件，希望在点击vdom之外的地方能控制vdom隐藏起来。我在使用e.stopPropagation()的时候，parent上面的点击事件没有执行。但是document监听的点击事件依旧执行了。为了解决这个问题，使用了contains这个方法，实现了点击vdom之外的地方控制vdom隐藏。