使用Mousetrap v1.6.1绑定表单元素报错：TypeError: a.attachEvent is not a function

你遇到的这个问题，核心是Mousetrap在绑定特定表单元素时，内部事件绑定逻辑错误触发了仅旧IE支持的attachEvent方法，而现代浏览器早已移除了这个API。结合你的使用场景（绑定billheaderfrm表单、代码放在jQuery ready回调中），我整理了几个针对性的解决方案：

1. 确保传递原生DOM元素给Mousetrap #

Mousetrap绑定指定元素时要求传入原生DOM对象，如果你的代码直接传递了jQuery对象（比如Mousetrap($('#billheaderfrm'))），会导致内部逻辑识别错误，进而触发错误的事件绑定分支。

修正后的代码示例：

$(document).ready(function(){
  // 通过jQuery对象的[0]或get(0)方法获取原生DOM元素
  const headerForm = $('#billheaderfrm')[0];
  // 绑定快捷键到目标表单
  Mousetrap(headerForm).bind('ctrl+s', function(e) {
    e.preventDefault();
    // 这里写你的表单处理逻辑
    console.log('触发header表单快捷键');
  });

  // 同理处理footer表单
  const footerForm = $('#billfooterfrm')[0];
  Mousetrap(footerForm).bind('ctrl+shift+s', function(e) {
    e.preventDefault();
    console.log('触发footer表单快捷键');
  });
});

2. 手动修复Mousetrap的事件绑定逻辑（不升级版本的情况下） #

如果你暂时无法升级Mousetrap版本，可以修改它内部的事件绑定代码。找到源码中处理事件绑定的方法（通常名为_bindSingle），将attachEvent的判断逻辑调整为优先使用标准API：

原代码可能类似：

if (el.attachEvent) {
  el.attachEvent('on' + eventName, callback);
} else {
  el.addEventListener(eventName, callback, false);
}

修改为：

if (el.addEventListener) {
  el.addEventListener(eventName, callback, false);
} else if (el.attachEvent) {
  el.attachEvent('on' + eventName, callback);
}

这样现代浏览器会优先调用标准的addEventListener，避免触发attachEvent的错误。

3. 升级到Mousetrap最新稳定版本 #

这个错误大概率是旧版本的兼容性bug，官方在后续版本中已经修复了元素绑定的相关问题。你可以替换现有v1.6.1的文件为最新稳定版，再测试绑定逻辑是否正常。

内容的提问来源于stack exchange，提问作者Adarsh Madrecha