onMouseUp和onClick事件沖突

Question

我有一個滾動條，我想在點擊一個按鈕時滾動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>

關於如何分離這兩種不同影響的任何想法？ 謝謝

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>