[英]onMouseUp and onClick events conflicting
我有一个滚动条,我想在点击一个按钮时滚动40px,当按住相同的按钮时,它会连续滚动
所以我使用onClick事件进行一次40px的步行,并使用onMouseDown和onMouseUp进行连续滚动效果
问题是onMouseUp也会触发onClick事件..所以当我们释放鼠标按钮时,滚动条移动了40多倍,这会产生不良影响
我在onMouseDown中使用了setInterval:
clickScroll = () => {
const slider : HTMLElement = this.state.scrollRef.current;
slider.scrollBy(40, 0)
}
holdScroll = (type : string) => {
const slider : HTMLElement = this.state.scrollRef.current;
this.setState({
interval : setInterval(() => {
slider.scrollBy(walk, 0)
}, 100)
})
}
stopHoldScroll = () => {
clearInterval(this.state.interval);
}
我的按钮:
<Button onClick={this.clickScroll}
onMouseDown={this.holdScroll}
onMouseUp={this.stopHoldScroll}>
<span className="fas fa-chevron-right" />
</Button>
关于如何分离这两种不同影响的任何想法? 谢谢
我终于找到了办法! 感谢雅克的想法
我们可以结合使用setTimeout和setInterval来创建一个单击和保持按钮之间的小差异。如果我们持有或只是单击,布尔可以在onMouseUp中指示我们! 它在持有300ms之后变为真,如果不是那么它只是一次点击
const slider : HTMLElement = this.state.refs.current;
scrollHold = () => {
this.setState({
timer: setTimeout(() => {
this.setState({
interval : setInterval(() => {
slider.scrollBy(8, 0)
}, 20),
holded: true
})
},300)
})
}
stopScroll = () => {
if (!this.state.holded){
this.state.current.scrollBy(40, 0)
}
clearTimeout(this.state.timer)
clearInterval(this.state.interval);
this.setState({ holded: false })
}
<Button
onMouseDown={this.scrollHold}
onMouseUp={this.stopScroll}>
<span className="fas fa-chevron-right" />
</Button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.