为什么在第一次按键时不触发“按键” /“按键”？

Question

我有一个精灵，它通过左右箭头键在X轴上进行动画处理。 它被设置为在“ keydown”上移动并在“ keyup”上停止。 问题是，它仅在第二次按键后才会设置动画。 我也尝试过按住向左键或向右键-在“键”上，子画面仍会动画。 同样，第二次按“ same”（相同）键后，这将取消。

我的活动从第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 ，这就是为什么它在第一次尝试时不起作用的原因。 检查固定的小提琴 。

更改：

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

至：

handleKeyDown();
handleKeyUp();

换句话说，您正在执行以下操作：

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

（请参见此小提琴作为上面代码的示例）

第一次单击会将alert绑定到下次单击，但不会执行其他任何操作。 这就是为什么它从第二次开始起作用的原因，并且您的代码也发生了类似的情况。