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

Question

Im пытается реализовать событие 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; 

Answer 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/