Объект события равен нулю в Firefox - PullRequest
Новая
       12

Объект события равен нулю в Firefox

0 голосов
/ 30 апреля 2018

Я использую jsViews для создания небольшой формы.

В шаблоне я определил несколько кнопок, привязанных к пользовательскому обработчику.

В обработчике я хочу поиграть с объектом event (особенно, я хочу предотвратить поведение кнопки по умолчанию, которое заключается в отправке внешнего <form>.

Это работает, как и ожидалось, во всех браузерах, которые я тестировал, кроме Firefox. объект события undefined с Firefox. Во всех других браузерах определен объект 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

Ответы [ 2 ]

0 голосов
/ 30 апреля 2018

Ознакомьтесь с документацией для {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. объект

0 голосов
/ 30 апреля 2018

В функциях обратного вызова вы можете проверить аргументы и посмотреть, что вам нужно. В этом случае мы можем попробовать это внутри changeValue callback: 

(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);

И теперь вы можете получить аргументы [1] как событие , чтобы выполнить предотвращение дефолта этого. 

(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);
...