如何避免按住键触发多个事件（JS）

Question

我正在尝试创建此事件以使用箭头键浏览网站。我面临的问题是，如果有人持有其中一个键，该函数（在本例中为 console.log）将重复触发，这可能会导致一些复杂函数的不良行为。

我希望 console.log 每次按键仅触发一次。

window.addEventListener('keydown', function (e) {
    switch (e.key) {
        case 'ArrowLeft':
            console.log('left');
            break;
        case 'ArrowRight':
            console.log('right');
            break;
    }
});

我最终使用了这个：

let allowKey = true;

window.addEventListener('keydown', function (e) {
    switch (e.key) {
        case 'ArrowLeft':
            if (allowKey) {
                console.log('Left');
                allowKey = false;
            }
            break;
        case 'ArrowRight':
            if (allowKey) {
                console.log('Right');
                allowKey = false;
            }
            break;
    }
});
window.addEventListener('keyup', function(e) {
    switch (e.key) {
        case 'ArrowLeft':
            allowKey = true;
            break;
        case 'ArrowRight':
            allowKey = true;
            break;
    }
});

谢谢。

Answer 1

将 'keydown' 更改为 'keyup'。释放密钥时只会运行，所以它是万无一失的。像这样：

window.addEventListener('keyup', function(e) {
            switch (e.key) {
                case 'ArrowLeft':
                    console.log('left');
                    break;
                case 'ArrowRight':
                    console.log('right');
                    break;
            }
        });

Answer 2

您可以创建一个变量来检查键是否上升。像这样：

var isKeyDown = false;

window.addEventListener('keydown', function(e) {
    if (!isKeyDown) {
      isKeyDown = true;
    } else {
      return
    }
    switch (e.key) {
        case 'ArrowLeft':
            console.log('left');
            break;
        case 'ArrowRight':
            console.log('right');
            break;
    }
});

window.addEventListener('keyup', function(e) {
  isKeyDown = false;
});

Answer 3

你可以使用event.repeat检查键是否已经被按下

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat

window.addEventListener('keydown', function(e) {
            
            if (e.repeat) return;

              //your code 
            switch (e.key) {
              
                case 'ArrowLeft':
                    console.log('left');
                    break;
                case 'ArrowRight':
                    console.log('right');
                    break;
            }
        });

如何避免按住键触发多个事件（JS）

How to avoid holding key triggering multiple events (JS)

javascript

dom-events