onMouseUp和onClick事件冲突

Question

我有一个滚动条，当我点击一个按钮时，我想滚动40px，当按住相同的按钮时，它会连续滚动

因此，我使用onClick event实现40px的单次漫游，并使用onMouseDown和onMouseUp实现连续滚动效果

问题是onMouseUp也会触发onClick事件。因此，当我们松开鼠标按钮时，滚动条移动了40px，这会产生不好的效果

我在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>

关于如何分离这两种不同的效果有什么想法吗？谢谢

Answer 1

我终于找到一种方法来做到这一点！感谢雅克的点子

我们可以将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>