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

Question

我有一个通过左右箭头键在 x 轴上进行动画处理的 Sprite 。它被设置为在“keydown”上移动并在“keyup”上停止。问题是，它仅在第二次按键后才会产生动画。我还尝试按住左键或右键 - 在“按键”时 Sprite 仍然会动画。同样，第二次按“相同”键后，此操作会取消。

我的事件从第 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 上绑定(bind)事件监听器，这就是为什么它在第一次尝试时不起作用。检查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)

第一次点击将为下一次点击绑定(bind)警报，但它不会执行任何其他操作。这就是为什么它从第二次开始就有效，并且您的代码也发生了类似的情况。