检测交替键事件

Question

我正在为以下任务编写脚本：

任务是让参与者以最快的速度交替按下键盘上的a和b键10分钟。每次参与者成功按下 a 键，然后再按下 b 键，他们应该获得一分。只有交替按键才能获得分数，按 a 键或 b 键而不在两者之间交替按下不应产生分数。

我要问的部分问题是交替键事件的检测。我自己尝试了这个并以下面的代码结束，但它没有达到预期的结果并且我收到以下错误：

Uncaught ReferenceError: x is not defined

...但我只是不明白我做错了什么。

如何修复我的代码并获得预期的结果？

var points = 0;

document.addEventListener('keydown', function(event) {
    var x = event.code;
});

document.addEventListener('keydown', function(event) {
    if (x == 'KeyA' && event.code == 'KeyB') {
        points = points + 1;
        document.getElementById("points").innerHTML = points;
    }
});

<p>Points: <span id="points">0</span></p>

Answer 1

你只需要一个事件监听器，你需要在监听器函数之外定义a按键状态变量（x），这样就可以由后续执行的侦听器函数引用。

您还需要确保在 b 按键后重置 a 按键变量。

缓存对元素的引用通常也是一个好主意，而不是在每次侦听器函数运行时从 DOM 中选择元素，并使用 textContent 而不是 innerHTML绕过HTML解析器。

const target = document.getElementById('points');
var points = 0, x;

document.addEventListener('keydown', function(event) {
    if(event.key === 'a') x = true; // If this is an `a` key event, set x to true
    if(event.key === 'b') {
        // if this is a `b` key event and a was not pressed, return early
        if(!x) return; 
        // otherwise increment the points variable and assign the result to 
        // the textContent property of the target element
        target.textContent = ++points; 
        // remember to set x to false again
        x = false;
    }
});

<p>Points: <span id="points">0</span></p>

检测交替键事件

Detect alternating key events

javascript

keyevent

dom-events