javascript - keyup 和 keydown 不同步？

Question

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

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

我的问题是，当我处理事件时， andkeyup之间没有关系。keyupkeydown

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

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

如果在键B之后按下键A ，则应在B事件之后触发A的“keyup” 。

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

keyupkeydown从字面上看就是这样。我可以按住a，按下b然后松开a。

这会给你：keydown：a，keydown：b：，keyup：b，keyup：a。

您必须能够处理这些“无序”的事件。

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...');