添加 'keydown' 事件侦听器到除输入字段之外的文档

Question

我正在创建一个带有虚拟键盘和表单输入部分的 Hangman 游戏，用户可以在其中猜出整个单词。

我可以向文档添加 'keydown' 事件侦听器，但我不想在输入字段中输入时触发 'keydown' 事件。

这是我添加事件侦听器的方式。

document.addEventListener('keydown', handleKeyDown);

这是表单输入。

<form onSubmit={e => onSubmit(e)}>
          <div className="input-group">
            <input
              type="text"
              className="form-control"
              name="letter"
              placeholder="Guess the word"
              value={formWord}
              onChange={e => setFormWord(e.target.value.toUpperCase())}
              disabled={disabled}
            />

            <div className="input-group-append">
              <button
                className="btn text-white"
                type="submit"
                disabled={disabled}
              >
                <i className="far fa-arrow-alt-circle-right" /> Go!
              </button>
            </div>
          </div>
        </form>

我已经尝试使用 document.getElementsByTagName[0].removeEventListener('keydown', handleKeyDown)，但它不起作用。我假设这是因为事件侦听器被添加到实际文档而不是元素上。

请帮忙！

Answer 1

在handleKeyDown中，如果event.target不匹配输入字段，则只执行函数体，例如：

const handleKeyDown = (event) => {
  if (event.target.matches('[name="letter"]')) {
    return;
  }
  // rest of function body
};

添加 'keydown' 事件侦听器到除输入字段之外的文档

Add 'keydown' event listener to document except for input field

javascript

html

addeventlistener

keydown

removeeventlistener