为什么在按住“ShiftRight”时“ShiftLeft”不会触发 keyUp 事件，反之亦然？答案

【问题标题】：Why does "ShiftLeft" not trigger a keyUp-event while "ShiftRight" is held and vice versa?为什么在按住“ShiftRight”时“ShiftLeft”不会触发 keyUp 事件，反之亦然？
【发布时间】：2020-07-01 18:50:41
【问题描述】：

考虑以下最小设置：

    function keyDown(event, element) {
        console.log("Down: " + event.code);
    }
    function keyUp(event, element) {
        console.log("Up: " + event.code);
    }

    <input
        type="text"
        onkeyup="keyUp(event, this)"
        onkeydown="keyDown(event, this)"
    />

现在，当输入字段处于活动状态时，控制台将在每次按下键和每次释放键时显示一条消息，以及相关键的键码。

按下和释放一个键将产生两条消息：

Down: KeyA Up: KeyA

按住一个键，然后按住另一个键，然后松开第一个键，然后松开第二个键将产生 4 条消息：

Down: KeyA Down: KeyB Up: KeyA Up: KeyB

这符合预期。现在，就上下文而言，“Shift”键实际上有两个键码，ShiftRight 和 ShiftLeft，分别用于区分大多数键盘上的左右 Shift 键。现在是有趣的部分：

重复与之前相同的双键模式，这次只是使用两个 shift 键，结果如下：

Down: ShiftRight Down: ShiftLeft Up: ShiftLeft

即使我在释放左移键之前释放了右移键，也从来没有为它触发过 keyUp 事件。如果我从ShiftLeft开始，反之亦然：

Down: ShiftLeft Down: ShiftRight Up: ShiftRight

一开始我以为这可能就是那些在键盘上有多个版本的特殊按钮的处理方式，但似乎没有那么简单。例如，ControlLeft 和 ControlRight 的行为方式与任何其他按钮相同。另一方面，Enter 和 NumpadEnter 的行为方式与两个班次的行为方式相同，每次都省略一个 keyUp-event。

这种行为的原因是什么？有没有办法关闭它？

【问题讨论】：

"有没有办法关闭它？" - 你能解释一下你到底想要做什么吗？我认为这个问题很好，但似乎是一个 XY 问题。
@chazsolo 我基本上只是在寻找一种单独处理每个键的方法，并确保触发 keyDown 事件的每个按下的键最终也会在释放时触发 keyUp 事件。这不是我现在正在编写的代码遇到的直接问题，我只是注意到了这种行为，并希望消除潜在的边缘情况。

标签： javascript html events keycode

【解决方案1】：

看起来这是浏览器违背您意愿提供帮助的情况。经过一番调查，我自己遇到了这个问题，我注意到event.repeat 标志的设置方式很奇怪。

从我的实验来看，浏览器似乎将两个 shift 键合并在一起，但仅适用于 keyup 事件。按第一个键将发出带有适当代码和event.repeat: false 的keydown 事件。按下另一个键会发出带有自己代码的keydown 事件，但event.repeat: true... 即使它是不同的键。此时，浏览器完全忘记了它们是单独的键。

一旦你松开一个键......什么都不会发生。浏览器仍然认为 'shift' 被持有，所以它完全吞下这个事件。实际上，您可以多次按下并释放它，但只能获得keydown 事件。只有当您释放第二个 shift 键时，您才会收到一个 keyup 事件及其各自的代码。

我不确定有什么方法可以阻止这种行为。该事件根本没有生成，甚至取消/防止默认原来的按班也不会影响它。

这会阻止您正确识别两个 shift 键到单个键的顺序，但您仍然可以依靠 keyup 来识别两个 shift 键已被释放，因为这似乎成为其开火的条件。如果您正在跟踪单个按键，您可以将ShiftLeft 的发布注册为ShiftRight 的发布，反之亦然。

【讨论】：