Evento React onMouseLeave non attivato quando si sposta rapidamente il cursore

Question

Sto tentando di implementare l'evento hover ma onMouseLeave non si attiva sempre quando si lascia l'elemento, specialmente quando si sposta velocemente il cursore sugli elementi. Ho provato i Chrome, Firefox e Internet Explorer ma in ogni browser è apparso lo stesso problema.

Il mio codice:

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

ho avuto un problema simile, ho provato diversi approcci e ho optato per questa soluzione (in parte basandosi su jQuery):

• chiamata $(event.currentTarget).one("mouseleave", this.onMouseLeaveHandler.bind(this)); quando onMouseEnter è grilletto.
• Non impostare alcun gestore di eventi onMouseLeave.

Ecco un esempio:

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; 

O controllare questo esempio su jsfiddle: http://jsfiddle.net/qtbr5cg6/1/