非键盘触发事件时JavaScript出现keyCode属性未定义错误

嘿，我来帮你搞定这个问题！

你遇到的错误根源很明确：当clear方法不是通过键盘事件触发时，e参数根本没有被传入，也就是undefined。而你原代码里只在调用preventDefault()前判断了e是否存在，但后面直接访问e.keyCode时没做检查，这就导致了报错。

这里有几种靠谱的修复方案，你可以根据自己的环境选择：

方案1：完整检查e的存在性 #

把两个操作都包裹在e存在的判断里，确保不会访问undefined的属性：

Fileinput.prototype.clear = function(e) { 
  if (e) {
    e.preventDefault(); 
    if(e.keyCode == 27) return; 
  }
}

方案2：使用可选链操作符（ES2020+） #

这是现代JS里最简洁的写法，可选链?.会自动判断前面的对象是否存在，不存在就直接返回undefined，不会报错：

Fileinput.prototype.clear = function(e) { 
  e?.preventDefault(); 
  if(e?.keyCode === 27) return; 
}

方案3：给参数设置默认空对象 #

如果需要兼容较老的JS环境，可以给e设置一个默认的空对象，这样即使没传参数，访问e.keyCode也只会得到undefined，不会报错：

Fileinput.prototype.clear = function(e = {}) { 
  if (e.preventDefault) {
    e.preventDefault(); 
  }
  if(e.keyCode === 27) return; 
}

另外提个小建议：keyCode已经是被废弃的API了，现在更推荐使用e.key或者e.code，比如判断e.key === 'Escape'，这样代码可读性更好，也更符合标准规范哦。

内容的提问来源于stack exchange，提问作者chirica andrei