События onMouseUp и onClick конфликтуют - PullRequest
Новая
       13

События onMouseUp и onClick конфликтуют

0 голосов
/ 15 июня 2019

У меня есть полоса прокрутки, и я хочу прокручивать ее на 40 пикселей при нажатии на кнопку, и, удерживая эту же кнопку, она непрерывно прокручивается

Так что я использовал событие onClick для одного перехода 40px, и я использовалonMouseDown и onMouseUp для эффекта непрерывной прокрутки

Проблема в том, что onMouseUp также запускает событие onClick ... поэтому полоса прокрутки перемещается на 40px больше, когда мы отпускаем кнопку мыши, и это дает плохой эффект

Я использовал setInterval внутри onMouseDown: 

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>

Есть идеи о том, как отделить эти 2 разных эффекта?спасибо

1 Ответ

0 голосов
/ 15 июня 2019

Я наконец нашел способ сделать это!спасибо Жаку за идею

мы можем объединить setTimeout и setInterval, чтобы создать небольшую разницу между щелчком и кнопкой удержания. Логическое значение может указывать на нас внутри onMouseUp, если мы удерживаем или просто щелкаем!оно становится истинным после 300 мс удержания, если нет, то это просто щелчок 

    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>
...