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

您正在绑定第一个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以进行下一次点击，但它不会执行任何其他操作。这就是为什么它第二次起作用，你的代码也发生了类似的事情。

为什么＆＃39; keydown＆＃39; /＆＃39; keyup＆＃39;在第一次按键时没有触发？

1 个答案: