javascript - event.altKey on the keyup event is false though the key is "down"

Question

只要按下 Alt 修饰符，我就想向元素添加 HTML 类。以下观察是使用当前版本的 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 事件允许我在按下键时添加类。

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

Mozilla Developer Network page对于事件，按预期列出了属性 event.altKey:当触发时键为 down 时，它应该为 true。

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

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

Answer 1

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

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

KeyboardEvent.altKey :如果 Alt 修饰符处于事件状态，则为 true，否则为 false