web-dev-qa-db-ja.com

Reactカーソルを速く動かしてもイベントonMouseLeaveがトリガーされない

ホバーイベントを実装しようとしていますが、要素を離れるときに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;
javascripteventshoverreactjseventtrigger
27
zazmaister

イベントリスナーが親要素にあり、子要素が条件付きでDOMに追加または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 });
  }
}
2
bzk