为什么'keydown'/'keyup'在第一次按键时没有触发？

Question

我有一个通过左右箭头键在 x 轴上动画的精灵。它设置为在“keydown”上移动并在“keyup”上停止。问题是，它仅在第二次按键后才动画。我也试过按住左键或右键——在'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

您将事件侦听器绑定到第一个 keydown/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 以供下次单击，但它不执行任何其他操作。这就是为什么它从第二次开始起作用，并且您的代码也发生了类似的事情。