当鼠标离开元素时，onMouseLeave触发

Question

我正在尝试在React中模拟hover事件。因此，我使用onMouseEnter和onMouseLeave来触发状态变化。

不幸的是，当我第一次用鼠标进入元素时，两种方法都会被触发...

当我离开该元素时，只有onMouseLeave被触发。有人知道为什么在进入元素时会触发onMouseLeave方法吗？

下面是我的代码：

   handleOver(event){
        event.preventDefault();
        console.log('enter');
        if(this.state.open === false){
            this.setState({
                open: true,
                anchorEl: event.currentTarget,
            });
        }
    }
    
    handleLeave(event){
         event.preventDefault();
         console.log('leave');
         if(this.state.open === true){
             this.setState({open: false})
         }
    }

                    <img
                        onMouseEnter={this.handleOver}
                        onMouseLeave={this.handleLeave}
                        src={InfoIcon}
                    />
                    
                    <Popover
                        open={this.state.open}
                        anchorEl={this.state.anchorEl}
                        anchorOrigin={{horizontal: 'right', vertical: 'top'}}
                        targetOrigin={{horizontal: 'left', vertical: 'top'}}
                        onRequestClose={this.handleLeave}
                        muiTheme={darkBaseTheme}
                    />

- Lorenz Weiß

---

你使用的是哪个版本的React？这可能与这个bug有关: https://github.com/facebook/react/issues/10906 - 3Dos

我正在使用15.6.1版本。 - Lorenz Weiß

Answer 1

从技术上讲，这不是一个错误，因为onMouseEnter事件被正确触发，导致Popover组件渲染在页面上方并产生背景，触发了onMouseLeave事件。

这个“问题”在[Popover] event handlers issue (mouseEnter and mouseLeave) #7680中进行了讨论。

感谢konradwww提供以下解释，它可以解释任何理智的人预期的行为：

<Popover
style={{ pointerEvents: 'none'}}
...

- Rocket Appliances

---

提醒其他人，即使你没有使用弹出框，这也可能是个问题！我有一个绝对定位的元素，本应完全位于可悬停区域之外，但仍然需要设置pointerEvents为none。 - undefined