Javascript 快速移动光标时未触发MouseLeave上的React事件

我正试图实现悬停事件，但离开元素时onMouseLeave并不总是触发，特别是当光标快速移动到元素上时。我尝试了Chrome、Firefox和Internet Explorer，但在每个浏览器中都出现了相同的问题

我的代码：

import React from 'react';
import Autolinker from 'autolinker';
import DateTime from './DateTime.jsx'
class Comment extends React.Component{

     constructor(props){
        super(props);
        this.handleOnMouseOver = this.handleOnMouseOver.bind(this);
        this.handleOnMouseOut = this.handleOnMouseOut.bind(this);
        this.state = {
            hovering: false
        };
    }

    render(){
        return <li className="media comment" onMouseEnter={this.handleOnMouseOver} onMouseLeave={this.handleOnMouseOut}>
            <div className="image">
                <img src={this.props.activity.user.avatar.small_url} width="42" height="42" />
            </div>
            <div className="body">
                {this.state.hovering ? null : <time className="pull-right"><DateTime timeInMiliseconds={this.props.activity.published_at} byDay={true}/></time>}
                <p>
                    <strong>
                        <span>{this.props.activity.user.full_name}</span>
                        {this.state.hovering ? <span className="edit-comment">Edit</span> : null}

                    </strong>
                </p>    
             </div>
        </li>;
    }


    handleOnMouseOver(event){
         event.preventDefault();
         this.setState({hovering:true});
    }

    handleOnMouseOut(event){
        event.preventDefault();
        this.setState({hovering:false});
    }

     newlines(text) {
        if (text) 
            return text.replace(/\n/g, '<br />');

    }



}

export default Comment;

从“React”导入React；
从“自动链接器”导入自动链接器；
从“./DateTime.jsx”导入日期时间
类注释扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleOnMouseOver=this.handleOnMouseOver.bind（this）；
this.handleOnMouseOut=this.handleOnMouseOut.bind（this）；
此.state={
悬停：错误
};
}
render（）{
return

{this.state.hovering？null:}


{this.props.activity.user.full_name}
{this.state.hovering？编辑：null}


；
}
手持鼠标器（事件）{
event.preventDefault（）；
this.setState（{hovering:true}）；
}
handleOnMouseOut（事件）{
event.preventDefault（）；
this.setState（{hovering:false}）；
}
换行符（文本）{
如果（文本）
返回文本。替换（/\n/g，“
”）；
}
}
导出默认注释；

当事件监听器位于父元素上并且子元素正在有条件地从DOM中添加/删除时，似乎是事件委派引起的问题。将一个“悬停目标”组件置于所有组件之上应该可以使其正常工作，但如果需要单击其中的元素，则可能会导致其他问题

<Container isOpen={this.state.isOpen}>
 <HoverTarget
  onMouseEnter={e => this.mouseOver(e)}
  onMouseLeave={e => this.mouseOut(e)}
 />
 <Content/>
</Container>



mouseOver(e) {
  if (!this.state.isOpen) {
    this.setState({ isOpen: true });
  }
}

这个.mouseOver（e）}
onMouseLeave={e=>this.mouseOut（e）}
/>
鼠标盖（e）{
如果（！this.state.isOpen）{
this.setState（{isOpen:true}）；
}
}

嘿，你如何确定onMouseLeave未被触发？您是否尝试过添加console.log语句？我想知道您是否正在经历onMouseOver/onMouseOut的错误排序，因为状态设置不是同步操作。我创建了一个简单的react组件，但无法轻松复制。有时会发生这样的情况，即在mouseLeave函数上留下元素时，不会调用。。是的，我尝试了日志记录，但函数未被调用。。那么我应该如何实现悬停事件呢？您可以尝试onMouseOver/onMouseOut，看看它是否更适合您，因为我认为这些事件得到了更好的支持，尽管其行为略有不同，因此可能不适合您的应用程序。请上传一个JSFIDLE以了解您的问题。我在你的代码中找不到任何错误。此外，不鼓励使用mouseout，因为当存在子元素时，它的工作方式不同。您可以在jQuery的文档中看到差异（虽然您没有使用jQuery，但行为基本相同）：@Alexandr您能提供更多信息吗？谢谢你，mouseleave工作得很有魅力！！谢谢