gpt4 book ai didi

javascript - 快速移动光标时未触发 onMouseLeave 事件

转载 作者:行者123 更新时间:2023-12-03 13:01:44 25 4
gpt4 key购买 nike

我正在尝试实现悬停事件,但 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;

最佳答案

似乎是当事件监听器位于父元素上并且有条件地从 DOM 中添加/删除子元素时由事件委托(delegate)引起的问题。将“悬停目标”组件放置在所有内容之上应该可以使其正常工作,但如果您需要单击其中的元素,则可能会导致其他问题。

<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 });
}
}

关于javascript - 快速移动光标时未触发 onMouseLeave 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31775182/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com