监听鼠标mouse事件冒泡处理

1、什么是冒泡事件？

事件冒泡就是父元素和子元素有相同的事件，当触发子元素时，会向上冒泡，同时也会触发父元素

简单的鼠标移动事件：

进入
代码如下:

mouseenter：不冒泡
mouseover: 冒泡
不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件

移出
代码如下:

mouseleave: 不冒泡
mouseout：冒泡
不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件
只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件

componentDidMount() {
   // 执行监听
    const navContainerDom = document.querySelector(".nav-container") as HTMLImageElement;
// 鼠标移出时触发，不冒泡
    navContainerDom.addEventListener("mouseleave", (e) => {
      console.log("dragleave事件触发");
      navContainerDom.style.display = "none";
    })
  }
  
// 移出监听
  componentWillUnmount() {
    const navContainerDom = document.querySelector(".nav-container") as HTMLImageElement;
    navContainerDom.addEventListener("mouseleave", (e) => {
      console.log("dragleave事件触发");
      navContainerDom.style.display = "none";
    })
  }


//点击图标
  /** 显示菜单 */
  showMenu = () => {
    const navContainerDom = document.querySelector(".nav-container") as HTMLImageElement;
    navContainerDom.style.display = "flex";
  }