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

在回调函数中，您可以检查 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);

Answer 2

看看documentation for {on}。

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

If the {on} binding is:
{^{on 'click' myHandler param1 param2 data=myData}}
or
data-link="{on 'click' myHandler param1 param2 data=myData}"
then the myHandler function should have the signature:
function myHandler(param1, param2, ev, eventArgs) { ... }
where ev is the jQuery event object and eventArgs is the JsViews event object

Firefox 的事件对象为空

Event object is null with Firefox

jsviews