如何在Javascript中同时按下三个键盘时触发事件

Question

我正在编写代码，以便在按下 ctrl + shift + z 键时执行特定功能。当我同时按两个键时，它工作正常，但当我按三个键时，该事件不会发生。下面是我写的代码。

try1:

 document.onkeydown = function (e) { 

        if (e.ctrlKey && e.key === 'z') {  // It works
            undo()  // ctrl+ z
           
        }
        else if (e.ctrlKey && e.shiftKey && e.key==='z' ) { //It doesn't work
            redo(); //ctrl + shift + z
        }
    }

try2:

document.onkeydown = function (e) { // 
        var ctrl, shift,z
        console.log(e.key)
        switch (e.key) {
            case 'Control':
                ctrl = true;
                break;
            case 'Shift':
                shift = true;
                break;
            case 'Z':
                z = true;
                break;
   
            }
        if (ctrl&&shift&&z) redo()
  }

如果您在三个键盘上打字，这些都不起作用。

如何使其在按下 ctrl+shift+z 时起作用

Answer 1

更改条件的顺序，因为第一个条件始终是true如果第二个条件为true，则导致第二个条件永远不会执行的代码。

document.onkeydown = function(e) {
    if (e.ctrlKey && e.shiftKey && e.key === 'Z') {
        undo()
    } else if (e.ctrlKey && e.key === 'Z') {
        redo();
    }
}

Answer 2

我很好地跟踪按键的方法是一个对象：

const keys = {}

function onKeyDown(e) {
    keys[e.key.toLowerCase()] = true
    doSomething()
}

function onKeyUp(e) {
    keys[e.key.toLowerCase()] = false
}

window.addEventListener('keydown', onKeyDown)
window.addEventListener('keyup', onKeyUp)

function doSomething() {
    console.log(keys)
    if (keys.control && keys.shift && keys.z) {
        console.log("redo!")
    } else if (keys.control && keys.z) {
        console.log("undo!")
    }
}