JavaScript : blur() 與按鈕的連發

朋友說學生在玩以 HTML5 FUN 烘焙機製作的遊戲時，發現空白鍵多按幾下，遊戲畫面會有「重影」的情形。聽起來應該是遊戲重覆載入了，本以為是單一遊戲的問題，試了一下，其實是HTML5 FUN 烘焙機啟動遊戲流程中的臭蟲。

在網頁瀏覽器中，按鈕除了可以用滑鼠按下，當按鈕已經「焦點」時(例如利用鍵盤的 Tab 鍵去按，一次次換焦點，直到目標變成焦點後不再按 Tab 鍵；或是剛剛被用滑鼠按過)，我們也可以按鍵盤的 Enter 鍵；除此之外，按鍵盤的空白鍵也可以的(當網頁中沒有任何物件是焦點時，以 Chrome 來說，按下空白鍵是跳到下一頁)。

整理一下關鍵點，用鍵盤按按鈕的兩個條件：

• 焦點已在按鈕上。
• 按下 Enter 鍵或是空白鍵。

嵌入網頁的 HTML5 FUN 遊戲是在 [PLAY] 鈕按下去以後載入程式，按完後焦點仍然停留在 [PLAY] 鈕上，所以在還沒有用滑鼠按其它物件之前，按了鍵盤的 Enter 鍵或是空白鍵，變會再載入並啟動一次遊戲，多按幾次 Enter 鍵或是空白鍵，應該該會呈現當掉的狀態。

按鈕「連發」的測試

來做個小實驗，下面有兩個按鈕，每成功按一次，中央的計數的數字就會加一。第一個按鈕是沒有特別處理的按鈕；第二個按鈕則會檢查有沒有連續地按，必須在按完後間隔一秒鐘，按了才會作用，讓數字加一。

實驗的方法是：

1. 用滑鼠按按鈕，看中央的數字是否有累加。
2. 按鍵盤的空白鍵，看中央的數字是否有累加。

0

如何讓按鈕無法連按

第二個按鈕經過處理後，滑鼠按完，如果又接著按鍵盤的空白鍵，不但沒讓數字累加，還將網頁的頁面捲了一頁(恢復為原來 hot key 的功能)。動了什麼手腳？

其實應該分為兩部份，一是如何讓按鈕在滑鼠按完以後，無法接著用空白鍵或 Enter 鍵來按，再來是控制下一次可以再按的時間點。

第一項任務比較容易完成，只要讓按鈕從 focus 變成 lost focus ，也就是讓按鈕執行 blur() 就好。例如按鈕物件是 btn，就執行：

btn.blur();

第二項任務，讓按鈕不能「連發」，可以利用一個變數來當旗標，不存在，表示首次按，按完就先設定變數內容，再利用 timeout 來設定在一段時間(看想多久後開放下次可按按鈕)後，執行將變數清除的指令；否則如果旗標存在的狀況，就不再繼續執行正常的動作（如本例中的，將數字累加）。

//讓 button lost focus, 以免按空白鍵也觸發
btn.blur();
//避免短時間內連續執行，有發現重覆執行就暫停 
if(typeof(window['clickEnable']) == 'undefined' || window['clickEnable']==null) {
  //首次按，設旗標
  window['clickEnable'] = true;
  setTimeout( function() {
    //時間到後清除旗標
    delete window['clickEnable'];
  }, 1000);
} else {
  //連續按了，不執行後面
  return;
}

//正常的程序

常常覺得，有人能發現自己的缺點是一件幸福的事；發現了問題，又能將問題處理掉，讓人、事、物更完美，能不幸福嗎！

相關連結

• 雄 : 打造自己的遊戲 : HTML5 FUN 烘焙機大彙整