javascript - onMouseLeave 在进入 Element 时触发

Question

我正在尝试在 React 中模拟悬停事件。所以我正在使用 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}
                    />

Answer 1

从技术上讲，这不是错误，因为 onMouseEnter 事件被正确触发，这导致 Popover 组件在页面上呈现背景，从而触发onMouseLeave 事件。

此“问题”在 [Popover] event handlers issue (mouseEnter and mouseLeave) #7680 中讨论.

归功于 konradwww ，为了列出以下解释，这会导致任何理智的人都会期望的行为:

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