POS系统点击Sell按钮报错：Cannot read properties of undefined (reading 'keyCode')

核心原因 #

报错本质是body的keydown事件处理函数被调用时，没有传入合法的事件对象e。你点击Sell按钮触发checkSale函数后报错，大概率是checkSale内部有代码触发了body的keydown事件逻辑（比如模拟回车结算、直接调用事件处理函数），但调用时没传事件对象，导致后续访问e.keyCode、e.type时因e为undefined而报错。

具体排查与解决步骤 #

1. 定位checkSale中触发keydown事件的代码

   • 搜索checkSale函数，看是否存在以下代码：
     • 直接调用事件处理函数：bodyKeydownHandler()（未传参数）
     • 触发事件：document.body.dispatchEvent()但未正确创建事件对象

2. 针对不同场景修复

   • 场景1：直接调用事件处理函数
     • 调用时传入模拟的事件对象，示例：

       // 按实际需求传入需要的属性，比如keyCode、type
       bodyKeydownHandler({ keyCode: 13, type: 'keydown' });
       

     • 或者修改事件处理函数，给参数加默认值并做可选链判断：

       function bodyKeydownHandler(e = {}) {
         // 用可选链避免属性不存在报错
         if (e?.keyCode === 13) {
           // 你的业务逻辑
         }
         if (e?.type === 'keydown') {
           // 你的业务逻辑
         }
       }
       

   • 场景2：用dispatchEvent触发事件
     • 正确创建键盘事件再触发，示例：

       // 创建符合规范的键盘事件
       const keydownEvent = new KeyboardEvent('keydown', {
         keyCode: 13, // 按实际需求设置
         bubbles: true // 需要事件冒泡则添加
       });
       document.body.dispatchEvent(keydownEvent);
       

3. 额外排查点

   • 检查checkSale中是否重复绑定了body的keydown事件，导致多次触发时出现异常
   • 确认模板自带script.js的keydown事件绑定逻辑，是否存在绑定后未正确销毁、与业务代码冲突的情况

内容的提问来源于stack exchange，提问作者Iskander Azlef