onMouseUp 和 onClick 事件冲突答案

【问题标题】：onMouseUp and onClick events conflictingonMouseUp 和 onClick 事件冲突
【发布时间】：2019-10-29 13:03:37
【问题描述】：

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

所以我使用 onClick 事件进行 40 像素的单次步行我使用 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>

关于如何分离这两种不同效果的任何想法？谢谢

【问题讨论】：

您实际上可以只使用 mousedown/up。要获得点击功能，请在 mousedown 时启动一个计时器，然后如果少于 100 毫秒，一个 mouseup，触发 clickScroll 代码并清除间隔
谢谢它帮助了我！查看我的新答案

标签： javascript html reactjs typescript responsive-design

【解决方案1】：

我终于找到了办法！感谢 Jacques 的想法

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

【讨论】：