鼠标移入移出事件与父子元素问题

1. onmouseover, onmouseout : 父元素和子元素都会触发。
2. onmouseenter, onmouseleave：子元素不会触发。

需求场景：

鼠标移入之前

鼠标移入展示二维码

实现方式：

在React中，通过给分享元素绑定onmouseover 和 onmouseout事件，并在state中维护一个hoverCardImg状态来控制图片的显示与隐藏。

    openInfoCardImg(): void {
     
      this.setState({
     
        hoverCardImg: true
      })
    }
    closeInfoCardImg(): void {
     
        this.setState({
     
          hoverCardImg: false
        })
    }


  render() {
     
    return <div className={
     styles.content}>
      <div className={
     styles.share} onMouseOver={
     this.openInfoCardImg.bind(this)} onMouseOut={
     this.closeInfoCardImg.bind(this)}>
       分享
       <img src={
     '我是二维码'}></img>
      </div>
    </div>
  }

但是我们希望当鼠标移出分享标签，并移入二维码上面的时候仍然保持展示二维码，这个时候就需要通过定时器来控制展示隐藏。

  openInfoCardImg(): void {
     
    clearTimeout(timer);
    this.setState({
     
      hoverCardImg: true
    })
  }
  closeInfoCardImg(): void {
     
    timer = setTimeout(() => {
     
      this.setState({
     
        hoverCardImg: false
      })
    }, 100)
  }

通过给鼠标移出事件添加一个100ms的定时器，并在移入事件中清除，由于 onmouseover, onmouseout 父元素和子元素都会触发。因此，当鼠标移出父元素（分享标签）的时候，并不会立刻触发移出事件隐藏二维码，而鼠标移入子元素（二维码）的时候就会再次触发移入事件，并清除上次的移出事件，这样就实现了上面的要求。