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

Question

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

尝试1：

 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
        }
    }

尝试2：

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!")
    }
}

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

How to trigger an event when three keyboards are pressed at the same time in Javascript

javascript

keyevent

keydown