Firefox下Event对象为null：jsViews表单按钮事件处理异常

我之前碰到过一模一样的问题——Firefox对事件对象的处理确实比Chrome、Edge这类浏览器更“严格”，再加上jsViews模板的事件绑定有特定规则，只要做个小调整就能解决。

核心修复步骤：显式传递~event对象 #

在jsViews的模板里，必须显式把~event作为参数传给你的自定义处理函数，这是跨浏览器兼容的关键。Firefox不会像其他浏览器那样自动把事件对象注入到处理函数参数里，而jsViews提供的~event变量是专门用来在模板中访问当前触发事件的标准对象，能自动适配不同浏览器的事件模型。

1. 修改模板中的按钮绑定 #

假设你原来的模板按钮是这样写的：

<button data-link="click mySubmitHandler">提交</button>

或者直接用原生onclick：

<button onclick="mySubmitHandler()">提交</button>

把它改成这样，显式传递~event：

<button data-link="click mySubmitHandler(~event)">提交</button>

或者：

<button onclick="mySubmitHandler(~event)">提交</button>

2. 调整处理函数接收并兼容事件参数 #

在你的处理函数里，先接收这个事件参数，再做一层兜底兼容（保险起见）：

function mySubmitHandler(event) {
  // 兜底：如果极端情况下还是没拿到event，尝试从window.event获取（针对旧环境）
  event = event || window.event;

  // 阻止表单默认提交行为（跨浏览器写法）
  if (event.preventDefault) {
    event.preventDefault(); // 标准浏览器（包括Firefox）
  } else {
    event.returnValue = false; // 旧IE浏览器
  }

  // 你的其他业务逻辑...
  console.log('当前事件对象:', event); // 现在Firefox里也能拿到MouseEvent了
}

为什么Firefox会出现这个问题？ #

• Chrome、Edge等浏览器在事件触发时，会自动将Event对象作为第一个参数传入处理函数，所以即使你没显式传递，也能拿到。
• 但Firefox遵循更严格的W3C标准，只有当你显式传递事件对象时，处理函数才能获取到它；而且Firefox不支持IE遗留的window.event全局事件对象，所以之前的代码在Firefox里就会出现event为undefined的情况。
• jsViews的~event变量是模板层面的特殊变量，它会帮你处理不同浏览器的事件模型差异，确保你拿到的是标准的Event对象。

完整修正后的代码示例 #

结合你提供的代码结构，修正后的完整代码大概是这样的：

(function($) {
  // 你的数据模型
  var formData = {
    username: '',
    password: ''
  };

  // 自定义按钮处理函数
  function handleButtonClick(event) {
    event = event || window.event;
    
    // 阻止表单默认提交
    event.preventDefault ? event.preventDefault() : (event.returnValue = false);
    
    // 你的业务逻辑：比如验证表单、提交数据等
    console.log('表单数据:', formData);
    console.log('事件对象:', event);
  }

  // 注册处理函数为jsViews助手
  $.views.helpers({
    handleButtonClick: handleButtonClick
  });

  // 渲染模板到页面
  $('#form-wrapper').link(formData);
})(jQuery);

对应的模板部分：

<div id="form-wrapper">
  <form>
    <label>用户名: <input data-link="username" type="text"></label>
    <label>密码: <input data-link="password" type="password"></label>
    <!-- 显式传递~event给处理函数 -->
    <button data-link="click handleButtonClick(~event)">提交</button>
  </form>
</div>

这样修改后，Firefox下就能正常获取到Event对象，并且可以顺利阻止表单的默认提交行为了。

内容的提问来源于stack exchange，提问作者Steve B