如何防止 keyup 事件中断 jQuery 中的 keydown 事件？ [复制]答案

【问题标题】：How do I prevent a keyup event from interrupting a keydown event in jQuery? [duplicate]如何防止 keyup 事件中断 jQuery 中的 keydown 事件？ [复制]
【发布时间】：2012-12-18 05:15:48
【问题描述】：

可能重复：
Cross-browser way to get automatically repeating keydown events when key is held down

我正在尝试在 JavaScript/CSS/HTML 中创建一个简单的游戏，并且我正在使用 jQuery（和一点下划线）来处理按键。玩家使用箭头键控制方块。我遇到了同时处理多个按键的问题。我有一个系统，其中一个闭包跟踪所有按下的箭头键。如果玩家按以下顺序按键，这很有效：

玩家按下向下（方块向下移动）
玩家按下左键（方块向左斜下方移动）
玩家释放向下（方块向左移动）
玩家释放左手（阻止停止

但是，如果将第 3 步和第 4 步颠倒过来，程序块就会停止。以下是在这种情况下实际发生的情况：

玩家按下向下（方块向下移动）
玩家按下左键（方块向左斜下方移动）
玩家释放左手（挡住）

预期的行为是，在第 3 步，块将继续向下移动，而不是完全停止。

从我在代码中的跟踪来看，似乎一个 keyup 事件实际上停止了进一步的 keydown 事件的传播，即使我的手指仍然按住其中一个箭头键。

这里是相关代码的sn-p。谁能告诉我问题出在哪里？

// Creates an animation handler for a specific element.
// Animation reacts to any changes as they are submitted
var getMovementAnimator = function(element) {
    var params = {},
        $element = $(element);
    return function(changes) {
        _.each(changes, function(val, key) {
            // Remove null or zeroish keys from animation params
            if ( (val == 0 || !val) && _.has(params, key)) {
                delete params[key];
            } else {
                params[key] = '+=' + val + 'px';
            }
        });
        $element.animate(params, {duration: 0, queue: false});
        console.log(params);
    };
};

// Determines direction and speed of movement for an element
// after a keypress event
var getMovementChange = function(keyEvent, keydown) {
    var isMoving = !!keydown,
        params   = {},
        dir      = '',
        speed    = keydown ? 5 : 0,
        arrows   = {left: 37, up: 38, right: 39, down: 40};
    switch (keyEvent.which) {
        case arrows.left:
            dir = 'left';
            speed = -speed;
            break;
        case arrows.up:
            dir = 'top';
            speed = -speed;
            break;
        case arrows.right:
            dir = 'left';
            break;
        case arrows.down:
            dir = 'top';
            break;
    }
    // If key hit not one of above, do nothing
    if (!dir) {
        return false;
    }
    if (!speed) {
        console.log('key up: ', dir);
    }
    params[dir] = speed;
    return params;
}

// Sets up key handlers
$(document).ready(function() {
    var board = $('#board'),
        animatePlayer = getMovementAnimator('.player');
    $(document).keydown(function(e) {
        e.preventDefault();
        var changes = getMovementChange(e, true);
        animatePlayer(changes);
    }).keyup(function(e) {
        e.preventDefault();
        var changes = getMovementChange(e, false);
        animatePlayer(changes);
    });
});

【问题讨论】：

标签： keyboard jquery-animate jquery keyboard-events

【解决方案1】：

在 Stack Overflow 上的进一步搜索（使用正确的关键字）表明我看到的问题实际上并不是我的代码中的错误。而是this is expected behavior for the operating system。

但是，我找到了a workaround which I believe will resolve the issue。

【讨论】：