keyup 和 keydown 不同步？

Question

我正在尝试构建一个复杂的所见即所得，为此我想在按下某些键后创建一些动作。

为此，我在 div 和 contenteditable 上添加了 jquery keypress 和 keyup 听众。我的一项操作对 HTML 进行了一些更改，更改后我的光标位置应保持不变。

我的问题是当我处理 keyup 事件时，keyup 和 keydown 之间没有关系。

不应按时间关系触发 keyup 事件。

如果你开始写下面的例子，你可以看到keydown和keyup之间没有顺序。

如果在键 B 之后按下键 A 则 A[=49= 的 ‘keyup` ] 应该在 B.

事件后触发

var result = document.getElementById('div-result');
function log(msg) {
  result.innerHTML = result.innerHTML + '<br>' + msg;
}
$('#div-editable').keydown(function(e) {
  log('down:&nbsp;' + e.keyCode);
});
$('#div-editable').keyup(function(e) {
  log('up:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + e.keyCode);
});
log('Iniciando log...');

div#div-editable {
  background: #F2F2F2;
  padding: 10px;
  border: solid 1px #333333;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id="div-editable" contenteditable>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

<div id="div-result"></div>

无法同步这些方法。换句话说，当我处理 keyup、keydown 应该 等待。

Answer 1

keyup 和 keydown 就是字面意思。我可以按住a，按b然后松开a。

这会给你：keydown: a, keydown: b:, keyup: b, keyup: a.

您必须能够处理这些事件 'out of order'。

Answer 2

也许您想保留一些有关当前正在按下哪些键的状态信息，以便您可以忽略任何重复事件，直到它被按下。例如，

var result = document.getElementById('div-result');
var pressed_keys = {};

function log(msg) {
    result.innerHTML = result.innerHTML + '<br>' + msg;
}

$('#div-editable').keydown(function(e) {
    if (pressed_keys[e.keyCode]) {
        // Currently pressed, ignore.
        return;
    }

    // Mark key as pressed.
    pressed_keys[e.keyCode] = true;

    log('down:&nbsp;' + e.keyCode);
});

$('#div-editable').keyup(function(e) {
    log('up:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + e.keyCode);

    // Mark key has depressed.
    pressed_keys[e.keyCode] = false;
});

log('Iniciando log...');