如何在Windows Forms中取消按钮选中或重新定义回车键功能

问题根因 #

该问题由浏览器默认的元素聚焦机制导致：每次点击计算器的按钮后，被点击的按钮会进入聚焦状态，此时按下回车键，浏览器会默认触发当前聚焦按钮的click事件，和绑定的回车等于逻辑叠加，就出现了重复触发上一次按钮操作的问题。

修复方案 #

你可以任选以下一种方案修复，也可以组合使用提升稳定性：

• 方案1：阻止回车键的默认行为
  在回车键的事件处理函数最开头调用event.preventDefault()，禁用浏览器默认的触发聚焦元素点击的行为，仅执行自定义的等于逻辑：

  document.addEventListener('keydown', event => {
    if (event.key === 'Enter') {
      event.preventDefault();
      // 调用你已有的等于号处理函数即可
      handleEqual();
    }
  })
  

• 方案2：点击按钮后主动失焦
  给所有计算器按钮增加点击后失焦的逻辑，避免按钮长时间保持聚焦状态，从根源避免回车触发按钮点击：

  // 选择器替换为你实际的计算器按钮类名
  document.querySelectorAll('.calc-btn').forEach(btn => {
    btn.addEventListener('click', e => e.target.blur());
  })
  

• 方案3：统一按键事件监听类型
  目前混用keypress和keydown两类事件会提升逻辑冲突的概率，建议统一使用keydown处理所有按键逻辑：
  1. keypress事件本身已被Web标准弃用，未来存在兼容性风险
  2. 数字、运算符、等号常规按键都可通过keydown正常监听，和delete键的监听逻辑保持一致，不需要做额外的事件类型区分

额外注意 #

如果计算器按钮是放在<form>标签内的，回车还会触发表单默认提交行为，除了上述操作外，还需要给表单绑定submit事件并调用event.preventDefault()，或者直接移除不必要的<form>包裹。

内容的提问来源于stack exchange，提问作者Matthew Bendyna