如何禁用第二次單擊按鈕

Question

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

任何幫助，將不勝感激。

Answer 1

您可以檢查事件的detail屬性為1 ，這意味着它不是雙擊的第二次。

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

或使用類似lodash的throttle

handle_click = _.throttle(func, 500)

這將確保每500ms最多可以調用一次該功能

Answer 2

從那以后，您已經在記錄點擊次數。 如何在打開模態時禁用按鈕並在關閉模態時啟用按鈕呢？

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

確保在每次與按鈕交互時更新狀態isModalActive 。