Question

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

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

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

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

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

如果在 B 键后按下 A 键， 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

keyup和keydown确实如此。我可以按住 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...');

keyup和keydown不同步？

2 个答案: