Question

根据Fiddle

Knockout将使用jQuery（如果存在）来处理UI事件。要禁用此行为并指示Knockout始终使用本机事件处理，您可以在调用ko.applyBindings之前在代码中设置以下选项

ko.options.useOnlyNativeEvents = true;

但设置上述属性并不会阻止使用jquery附加的事件。

HTML

<input id="test" type="text" data-bind="value:defaultVm.Temp,event:{change:defaultVm.ChangeEvt}"/>
<label data-bind="text:defaultVm.Temp" style="color:#ffff"/>

JS

  defaultVm = function() {

    var temp = ko.observable("tests");

    var changeEvt = function(){
        alert("I was called");
    }

    return {
      Temp: temp,
      ChangeEvt : changeEvt
    }
  }();

  ko.options.useOnlyNativeEvents = true; // Doesnt change any behaviour
  ko.applyBindings(defaultVm);


$('#test').on('change',function()
{
    alert("I was called");
});

我的{{3}}出了什么问题，为什么设置属性ko.options.useOnlyNativeEvents = true;并不会更改默认行为？

Answer 1

useOnlyNativeEvents选项不阻止您附加任何事件处理程序。 Knockout无法阻止DOM api被其他代码使用......你必须在自己的代码中强制执行它。

做什么：

事件绑定（以及扩展它的绑定，如click）将两个参数传递给其侦听器方法：$data和event。不使用jQuery时，event的类型为Event。

使用jQuery，类型变为jQuery.Event object

＆＃13;

const logType = (d, e) => {
  console.log("Regular event:", e instanceof Event);
  console.log("jQuery event:", e instanceof jQuery.Event);
}

ko.applyBindings(
  { onClick: logType },
  document.querySelector("#btn1")
)

ko.options.useOnlyNativeEvents = true;
ko.applyBindings(
  { onClick: logType },
  document.querySelector("#btn2")
)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<button id="btn1" data-bind="click: onClick">is jQuery event</button>
<button id="btn2" data-bind="click: onClick">is regular event</button>

＆＃13;

Knockout：使用useOnlyNativeEvents和Jquery事件

1 个答案: