onmouseover, onmouseout
: 父元素和子元素都会触发。onmouseenter, onmouseleave
:子元素不会触发。
需求场景:
鼠标移入之前
鼠标移入展示二维码
实现方式:
在React中,通过给分享元素绑定onmouseover 和 onmouseout
事件,并在state中维护一个hoverCardImg
状态来控制图片的显示与隐藏。
openInfoCardImg(): void {
this.setState({
hoverCardImg: true
})
}
closeInfoCardImg(): void {
this.setState({
hoverCardImg: false
})
}
render() {
return <div className={styles.content}>
<div className={styles.share} onMouseOver={this.openInfoCardImg.bind(this)} onMouseOut={this.closeInfoCardImg.bind(this)}>
分享
<img src={'我是二维码'}></img>
</div>
</div>
}
但是我们希望当鼠标移出分享标签,并移入二维码上面的时候仍然保持展示二维码,这个时候就需要通过定时器来控制展示隐藏。
openInfoCardImg(): void {
clearTimeout(timer);
this.setState({
hoverCardImg: true
})
}
closeInfoCardImg(): void {
timer = setTimeout(() => {
this.setState({
hoverCardImg: false
})
}, 100)
}
通过给鼠标移出事件添加一个100ms的定时器,并在移入事件中清除,由于 onmouseover, onmouseout
父元素和子元素都会触发。因此,当鼠标移出父元素(分享标签)的时候,并不会立刻触发移出事件隐藏二维码,而鼠标移入子元素(二维码)的时候就会再次触发移入事件,并清除上次的移出事件,这样就实现了上面的要求。