如何禁用第二次单击按钮答案

【问题标题】：How to disable the second click on a button如何禁用第二次单击按钮
【发布时间】：2019-07-22 10:50:54
【问题描述】：

我有一个在framework7 中打开模式的按钮，但是如果双击，模式会打开两次，我试图在没有运气的情况下不允许双击该按钮。

$(Button, {
  fill: true,
  raised: true,
  noFastClick: true,
  onClick: this.handle_click
})

const clickTimes: any[] = []

handle_click = (button) => {
   const clickTime = new Date().getTime()
   clickTimes.push(clickTime)
   if (clickTimes.length > 1) {
       console.log("double click detected")
       button.disabled = true
       clickTimes.length = 0
       return
   }
}

任何帮助将不胜感激。

【问题讨论】：

检查模态框是否已经在事件处理程序之外渲染。或者在单击时删除事件处理程序并在关闭模式时读取它。或者只是使用 debounce 功能，就像您尝试自己编写一样。 davidwalsh.name/javascript-debounce-function

标签： javascript reactjs ecmascript-6 ecmascript-5 html-framework-7

【解决方案1】：

您可以检查事件的detail 属性是否为1，这意味着它不是双击的第二次单击。

If (e.detail !== 1) { return }

或使用类似lodash的throttle

handle_click = _.throttle(func, 500)

这将确保每个500ms 最多可以调用一次函数

【讨论】：

它仍然会触发 2 个鼠标点击事件，详细信息：1
你可能需要使用throttle然后
我应该如何使用处理程序？它会进入handle_click 函数吗？
让我指定。就是handle_click函数

【解决方案2】：

因为，您已经在记录点击次数。当模态打开时禁用按钮并在模态关闭时启用它怎么样？

return <button
  type='button'
  className={
    this.state.isModalActive ? 'disable' : ''
  }
  onClick={ this.handleClick }
>

确保在每次与按钮交互时更新状态 isModalActive。

【讨论】：