Question

只要按下 Alt 修饰符，我想向元素添加HTML类。以下观察是使用当前版本的谷歌浏览器（在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 : true if Alt modifier was active, otherwise false

虽然密钥是“关闭”，但keyup事件的event.altKey为false

1 个答案: