Реагировать событие onMouseLeave не запускается при быстром перемещении курсора

Я пытаюсь реализовать событие hover, но 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;

import React from 'react'; import $ from 'jquery'; import Autolinker from 'autolinker'; import DateTime from './DateTime.jsx' class Comment extends React.Component{ constructor(props){ super(props); this.state = { hovering: false }; } render(){ return <li className="media comment" onMouseEnter={this.handleOnMouseOver.bind(this)}> <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}); $(event.currentTarget).one("mouseleave", this.onMouseLeaveHandler.bind(this)); } handleOnMouseOut(event){ event.preventDefault(); this.setState({hovering:false}); } newlines(text) { if (text) return text.replace(/\n/g, '<br />'); } } export default Comment;

Ответ 1