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

Я пытаюсь реализовать событие hover, но onMouseLeave не всегда запускается при выходе из элемента, особенно при быстром перемещении курсора по элементам. Я попробовал Chrome, Firefox и Internet Explorer, но в каждом браузере появилась такая же проблема.

Ответ 1

У меня была аналогичная проблема, я пробовал разные подходы, и я остановился на этом обходном пути (частично полагаясь на jQuery):

Вызов $(event.currentTarget).one("mouseleave", this.onMouseLeaveHandler.bind(this));, когда onMouseEnter является триггером.
Не устанавливайте обработчик событий onMouseLeave.

Вот пример:

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;

Или проверьте этот пример на jsfiddle: http://jsfiddle.net/qtbr5cg6/1/

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

Ответы

Ответ 1