Firefox 的事件对象为空

Question

我使用 jsViews 创建一个小表单。

在模板中，我定义了一些绑定到自定义处理程序的按钮。

在处理程序中，我想使用event 对象（特别是，我想阻止默认按钮行为，即提交外部<form>。

这在我测试过的所有浏览器上都可以正常工作，除了 Firefox。事件对象是 Firefox 的 undefined。所有其他浏览器都定义了一个MouseEvent 对象。

如何使用 FF 修复它？

这是一个小复制：

(function($) {
  var dataVm = {
    value: 42
  };

  var handlers = {
    changeValue: function(valueToAdd) {
      $.observable(dataVm).setProperty("value", dataVm.value + valueToAdd);
      console.log(event); // Should not be undefined
    }
  };

  $.templates("#mainTemplate").link("#container", dataVm, handlers);
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jsviews.min.js"></script>
<script id="mainTemplate" type="text/x-jsrender">
  <input data-link="value" />
  <button data-link="{on ~changeValue 1}">+1</button>
  <button data-link="{on ~changeValue (-1)}">-1</button>
</script>

<div id="container">

</div>

PS：我使用 jQuery 1.12.4 和 jsViews 0.9.90

Answer 1

看看documentation for {on}。

这里解释了传递给 {on} 事件处理程序的参数： http://www.jsviews.com/#link-events，在 事件处理函数的签名部分中，它说：

如果{on} 绑定是：

{^{on 'click' myHandler param1 param2 data=myData}}

或

data-link="{on 'click' myHandler param1 param2 data=myData}"

那么myHandler函数应该有签名：

function myHandler(param1, param2, ev, eventArgs) { ... }

ev 是 jQuery 事件对象，eventArgs 是 JsViews 事件 对象

Answer 2

在回调函数中，您可以检查 arguments 并查看您需要什么。在这种情况下，我们可以在 changeValue 回调中尝试：

(function($) {
  var dataVm = {
    value: 42
  };

  var handlers = {
    changeValue: function(valueToAdd) {
      $.observable(dataVm).setProperty("value", dataVm.value + valueToAdd);
      console.log(arguments); // check what actual arguments are
    }
  };

  $.templates("#mainTemplate").link("#container", dataVm, handlers);
})(jQuery);

而且，您现在可以将 arguments[1] 作为 event 来执行 preventDefault。

(function($) {
  var dataVm = {
    value: 42
  };

  var handlers = {
    changeValue: function(valueToAdd) {
      var theEvent = arguments[1];
      $.observable(dataVm).setProperty("value", dataVm.value + valueToAdd);
      console.log(arguments); // check what actual arguments are
      theEvent.preventDefault(); // execute preventDefault from it
    }
  };

  $.templates("#mainTemplate").link("#container", dataVm, handlers);
})(jQuery);