커서를 빠르게 이동할 때 마우스 탈퇴 시 반응 이벤트가 트리거되지 않음

커서를 빠르게 이동할 때 마우스 탈퇴 시 반응 이벤트가 트리거되지 않음

호버 이벤트를 구현하려고 하는데, 특히 커서를 요소 위로 빠르게 이동할 때 onMouse Leave가 항상 트리거되는 것은 아닙니다.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;

이벤트 리스너가 부모 엘리먼트에 있고 자녀 엘리먼트가 조건부로 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 });
  }
}

나도 요즘 같은 문제가 있었어.저 같은 경우에는 이벤트를 변경했습니다.

• 바꾸다onMouseEnter로.onMouseOver.
• 바꾸다onMouseLeave로.onMouseOut.

언급URL : https://stackoverflow.com/questions/31775182/react-event-onmouseleave-not-triggered-when-moving-cursor-fast