爲什麼'keydown'/'keyup'在第一次按鍵時不會觸發？

Question

我有一個精靈，通過左右箭頭鍵在x軸上進行動畫處理。它設置爲繼續'keydown'並停止'keyup'。問題是，它只在第二次按鍵後纔開始動畫。我也試着按住左鍵或右鍵 - 這在'精靈'上時仍然有動畫效果。再次，這在第二次按下「相同」鍵後取消。

我的活動，在線路54

我已經設置了控制檯日誌開始，所以它可能會更容易通過打開控制檯同時採取看看事件得到理解。

哦，是的，我使用EaselJS庫和Mousetrap鍵盤快捷鍵庫;不確定這是否有所作爲，因爲我的問題基本上與瀏覽器相關聯。任何解決方法或幫助我現有的代碼將是非常棒的。

function move() { 
if (rightHeld) { // move right 
    var speed = 3; 
    chuck.x += speed; 
    chuck.scaleX = 1; 
} // end move right 

if (rightHeld && keyDown == false) { // animate move right 
    chuck.gotoAndStop('idle'); 
    chuck.gotoAndPlay('walk'); 
    keyDown = true; 
} // end animate move right 

if (leftHeld) { // move left 
    var speed = 3; 
    chuck.x -= speed; 
    chuck.scaleX =- 1; 
} // end move left 

if (leftHeld && keyDown == false) { // animate move left 
    chuck.gotoAndStop('idle'); 
    chuck.gotoAndPlay('walk'); 
    keyDown = true; 
    } // end animate move left 
} // end function move 

/* KEYDOWN*/ 
function handleKeyDown(event) { 
    Mousetrap.bind('right', function() { 
      rightHeld = true; 
      console.log('keydown right'); 

    }, 'keydown'); // end 'right' 

    Mousetrap.bind('left', function() { 
      leftHeld = true; 
      console.log('keydown left'); 

    }, 'keydown'); // end 'left' 

} // end function handleKeyDown 

/* KEY UP */ 
function handleKeyUp() { 
    Mousetrap.bind('right', function() { 
     chuck.gotoAndStop('walk'); 
     chuck.gotoAndPlay('idle'); 
     rightHeld = false; 
     keyDown = false; 
     console.log('keyup right'); 

    }, 'keyup'); // end 'right' 

    Mousetrap.bind('left', function() { 
     chuck.gotoAndStop('walk'); 
     chuck.gotoAndPlay('idle'); 
     leftHeld = false; 
     keyDown = false; 
     console.log('keyup left'); 

    }, 'keyup'); // end 'left' 

    } // end function handleKeyUp 

JSFiddle

感謝聰明的人！

Answer 1

您正在綁定第一個​​/keyup上的事件偵聽器，這就是爲什麼它在第一次嘗試時不起作用。檢查the fixed fiddle。

變化：

window.onkeydown = handleKeyDown; 
window.onkeyup = handleKeyUp; 

到：

handleKeyDown(); 
handleKeyUp(); 

換句話說，你正在做這樣的事情：

button.onclick = function() { 
    button.onclick = function() { 
    alert("you click!"); 
    }; 
}; 

(see this fiddle as an example for the code above)

第一次單擊會將alert綁定爲下一次點擊，但它不會執行其他任何操作。這就是爲什麼它從第二次起作用，並且類似的事情正在發生在你的代碼中。