为什么第一次按键时没有触发“键下”/“键”

Why is 'keydown'/'keyup' not triggering on the first key press?

本文关键字：键下 第一次 为什么      更新时间：2023-09-26

我有一个精灵，它通过左右箭头键在 x 轴上动画化。它被设置为在"键下"移动并在"键上停止"。问题是，它仅在第二次按键后动画化。我还尝试按住左键或右键 - 在"键控"时，精灵仍然会动画。同样，这在第二次按下"相同"键后会抵消。

我的事件从第 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

谢谢聪明人！

您在第一次keydown/keyup上绑定事件侦听器，这就是为什么它在第一次尝试时不起作用的原因。检查固定的小提琴。

改变：

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

自：

handleKeyDown();
handleKeyUp();

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

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

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

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

相关文章：