如何让按键对应于在javascript中首先调用的函数

Question

所以我正在尝试一些东西，如果你有两个函数要在同一个按键后调用，如下所示：

    var plus = function () {
    document.addEventListener("keyup", function(e) {
        if (/[+]/g.test(e.key)) {
            console.log("plus");
        }
    })
    }

    plus();

    var minus = function() {
        document.addEventListener("keyup", function(e) {
            if (/[-]/g.test(e.key)) {
                console.log("minus");
            }
        });
    }

    minus();

    function check() {
        document.addEventListener("keyup", function(e) {
            if(plus) {
                if (e.keyCode == 13) {
                    console.log("enter pressed after plus");
                    plus = false;
                    minus = function() {
                        document.addEventListener("keyup", function(e) {
                            if (/[-]/g.test(e.key)) {
                                console.log("minus");
                            }
                        });
                    }
                }
            } else if(minus) {
                if (e.keyCode == 13) {
                    console.log("enter pressed after minus");
                    minus = false;
                    plus = function () {
                        document.addEventListener("keyup", function(e) {
                            if (/[+]/g.test(e.key)) {
                                console.log("plus");
                            }
                        })
                    }
                }

            }
        });
    }

    check();

如果你先按减号然后输入 console.log("enter pressed after plus") 总是首先被调用，因为代码的顺序，即使我想要做的是我希望输入对应于我首先按下的键，如果我按下加号然后我希望console.log("enter pressed after plus") 被调用，如果我先按减号然后我希望console.log("enter pressed after minus") 被调用。

任何帮助将不胜感激，并提前致谢。

哦，也对不起这个愚蠢的标题，想不出更好的标题。

Answer 1

要稍微清理一下（保留DRY），您可以将所有事件处理程序逻辑移动到单个函数中并使用单个侦听器。

要跟踪最后按下的键，我们可以使用variable defined in the function's outer scope。并且，在每个事件之后更新它。然后，当按下“Enter”时，我们可以检查最后一个键是什么并相应地记录。

---

此外，KeyboardEvent.keyCode 属性已折旧。您应该改用KeyboardEvent.code 属性。

---

示例

const input = document.querySelector('input')
const log = document.getElementById('log')

function check() {
  let lastKey = null

  input.addEventListener('keyup', ({ key }) => {
    if (['+', '-', 'Enter'].includes(key)) { // we only care about these keys
      if (key === '+') log.textContent = 'plus'
      if (key === '-') log.textContent = 'minus'
      if (key === 'Enter') { // `Enter` was keyed, what was keyed last?
        if (lastKey === '+') log.textContent = 'enter pressed after plus'
        if (lastKey === '-') log.textContent = 'enter pressed after minus'
      }

      lastKey = key // current key becomes last key
    }
  })
}

check()

<input placeholder="Click here, then press and release a key." size="40">
<p id="log"></p>

---