knockout.jsの要素に2つのイベントをバインドする方法

Question

私はKnockout.jsの初心者です。

私は基本的にイメージボタンのクリックでモーダルを開くコードスニペットを持っています。なんらかの理由で、キープレスでは機能しません。ここで

が最初のコードである：それはキー入力やからkeyupイベントがありませんでしたので

<div class="text-center tooltip-lg"> 
    <a class="tooltip-container" tabindex="0"> 
     <i class="icon icon-pencil dynamic-icon tooltip_trigger" title="edit" data-toggle="modal" data-target="#assessment_type_modal" data-placement="top" data-bind="click: $root.opt.openModalForEdit"></i></a></div> 

、私は以下の変更を行いました。

<div class="text-center tooltip-lg"> 
    <a class="tooltip-container" tabindex="0"> 
     <i class="icon icon-pencil dynamic-icon tooltip_trigger" title="edit" data-toggle="modal" data-target="#assessment_type_modal" data-placement="top" data-bind="event: { click: $root.opt.openModalForEdit, keypress: $root.opt.openModalForEdit }" ></i></a></div> 

この操作は、キー押しによってトリガーされません。私はキーアップも（stackoverflowのいくつかの質問に記載されているように）、それも動作しませんでした。

更新：アクションは認識されますが、イベントがトリガーされない理由はわかりません。 以下のテストケースを実行すると、そのタグの上にマウスを置くたびにテストがコンソールに表示されます。

<div class="text-center tooltip-lg"> 
    <a class="tooltip-container" tabindex="0"> 
     <i class="icon icon-pencil dynamic-icon tooltip_trigger" title="edit" data-toggle="modal" data-target="#assessment_type_modal" data-placement="top" data-bind="event: { click: $root.opt.openModalForEdit, 'mouseover' : function() { console.log('TEST'); return true; }" ></i></a></div> 

いずれかは私が間違っているのされていることをどのようなお勧めできます。ブラウザコンソールにもエラーは表示されません。

ありがとうございます。

Answer 1

keypressイベントがフォーカスを有する要素、すなわち：tabindex（あるいはcontenteditable）属性を有するか（任意<input>要素など）を自動的にサポートする要素にトリガされます。

tabindex=0の<a>要素にevent: { keypress: ... }バインディングを移動して問題を解決できます。

ko.applyBindings({ 
 
    onPress: function(d, e) { 
 
    console.log("keypress on node", e.target.nodeName); 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 

 
<p>Tap the text and press a key. The console will log the element that has the keypress event</p> 
 
<a tabindex="0" data-bind="event: { 
 
    keypress: onPress 
 
}"> 
 

 
    <i data-bind="event: { 
 
    keypress: onPress 
 
    }">some text</i> 
 
</a>