键控和键下不同步

Question

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

为此，我添加了 jquery keypress，并在带有div 的div 上keyup contenteditable侦听器。我的一个动作对 HTML 进行了一些更改，在此更改之后，我的光标位置应保持不变。

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

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

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

如果在键 B 之后按下了键 A

，则应在 B 的事件之后触发 A 的"键"。

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。

这将给你：键下：a，键下：b：，键

下：b，键上：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...');