event.altKey 上的 keyup 事件是 false 虽然键是 "down"

Question

我想添加一个 HTML class 到一个元素，只要按下 Alt 修饰符。以下观察是使用 Google Chrome 的当前版本进行的（在 Opera 中的行为相同）。

const rootElement = document.querySelector(':root')

document.addEventListener('keydown', function(event) {
    if (event.altKey) {
        rootElement.classList.add('modifier-pressed')
    }
})

document.addEventListener('keyup', function(event) {
    // This should be `event.altKey`, but it’s never `true`.
    // Checking for the actual key code works ¯\_(ツ)_/¯:

    // if (event.keyCode === 18) {
    if (event.altKey) {
        rootElement.classList.remove('modifier-pressed')
    }
})

第一部分工作正常。监听 keydown 事件允许我在按下键时添加 class。

第二部分不起作用。即使在触发 keyup 事件时 Alt 键是 down，event.altKey 属性设置为 false。这与报告的 event.keyCode: 18（Alt 键）相矛盾。至少是我理解的方式。

事件的 Mozilla Developer Network page 按预期列出了属性 event.altKey：当键为 down[= 时，它应该是 true 44=]开火时。

因此，就我而言，这是非常出乎意料的。然而，情况变得更糟：在 Firefox 中，在两个事件（keydown 和 keyup）中，属性 event.altKey 被设置为 false 而关键代码是预期 (18).

如何解谜？我的理解是否正确，这种行为确实出乎意料，还是我的理解有误？怎么回事？

Answer 1

根据 w3c 文档 altKey 事件属性 returns 如果按下则为 true，否则为 false，因此您的代码工作正常。在 keydown 事件 alt 被按下 - 所以它 returns keycode 18 和 true ，在 keyup alt 没有被按下，所以结果是 18 和 false。

检查link - https://www.w3.org/TR/uievents/#dom-keyboardevent-altkey

KeyboardEvent.altKey : true if Alt modifier was active, otherwise false

event.altKey 上的 keyup 事件是 false 虽然键是 "down"

event.altKey on the keyup event is false although the key is "down"

javascript

browser

addeventlistener

keyup