如何禁用第二次单击按钮

时间:2019-02-28 13:40:44

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

我有一个在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
   }
}

任何帮助将不胜感激。

2 个答案:

答案 0 :(得分:0)

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

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

或使用类似lodash的{​​{3}}

handle_click = _.throttle(func, 500)

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

答案 1 :(得分:0)

自此,您已经在记录点击次数。 如何在打开模态时禁用按钮并在关闭模态时启用按钮?

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

请确保在每次与按钮互动时更新状态 isModalActive