Hangman游戏：为document添加keydown监听且排除input输入框的方法

很常见的场景！你说得完全对——之前的方法没用，就是因为事件监听绑定在document上，输入框本身并没有绑定这个事件，所以移除输入框的监听自然起不到作用。这里有两种简单有效的解决方案：

方法一：在事件处理函数里过滤目标元素 #

直接在handleKeyDown函数中判断，当前触发事件的元素是不是我们的单词猜测输入框，如果是就跳过游戏逻辑。这种方法不用修改表单代码，只需要调整事件处理逻辑：

function handleKeyDown(e) {
  // 精准匹配我们的单词输入框（通过name属性判断）
  if (e.target.name === 'letter') {
    return; // 直接返回，不执行后续的游戏键盘处理逻辑
  }

  // 原来的Hangman游戏键盘交互逻辑写在这里
  // 比如：处理单个字母猜测、更新游戏状态等
}

如果页面上还有其他需要排除的元素（比如其他输入框、按钮），也可以扩展判断条件：

// 排除所有输入类和按钮元素
const excludedElements = ['INPUT', 'TEXTAREA', 'BUTTON'];
if (excludedElements.includes(e.target.tagName)) {
  return;
}

方法二：阻止输入框的事件冒泡 #

给输入框添加onKeyDown事件，调用e.stopPropagation()，这样输入框的键盘事件就不会向上冒泡到document层级，自然不会触发绑定在document上的监听：

<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}
   onKeyDown={(e) => e.stopPropagation()} {/* 新增这一行 */}
 />
 <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>

两种方法的选择 #

• 如果你只需要排除这一个输入框，方法二更直接高效，只针对目标元素做处理。
• 如果页面上有多个需要排除的元素（比如其他输入框、弹窗控件等），方法一更灵活，只需要在handleKeyDown里统一过滤即可。

内容的提问来源于stack exchange，提问作者Sup3r D