web-dev-qa-db-ja.com

KnockoutJsクリックイベントハンドラーでevent.preventDefaultを使用するにはどうすればよいですか？

KnockoutJsのスクリプトテンプレートとして次のテーブル行があります。

    <script id="inboxTemplate" type="text/html">           
    <tr data-bind="click: function() { viewInboxModel.selectAction($data); }">                                 
        <td>...</td>                 
        <td>${ CreateDate }</td>               
        <td data-bind="click: function(e){ e.preventDefault();viewInboxModel.clearAction($data); }"><img src="/Content/images/delete.png" height="16px" width="16px"> </td>
    </tr>            
    </script>

問題は、削除ボタンをクリックすると、selectAction（）メソッドも実行されていることです。 selectActionクリックハンドラーとclearAction（）クリッカーハンドラーの両方でe.preventDefault（）を使用しようとしましたが、役に立ちませんでした。とにかく、KnockoutJsは、削除ボタンがクリックされた場合に、基になる行がクリックされないようにすることができますか？

jqueryknockout.js
24
jaffa

JQueryが参照されている場合は、jQueryイベントオブジェクトが渡されるため、ハンドラーでe.stopImmediatePropagation();を安全に呼び出すことができます。 jQueryを使用していない場合でも、次のようなことができます。

e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();

http://jsfiddle.net/rniemeyer/mCxjz/

27
RP Niemeyer

@Benoit Drapeauのコメントによると：

Knockoutの最近のバージョンでは、clickBubble：falseを使用します。例えば.

<td data-bind="click: myFunction, clickBubble: false"> </td>

http://knockoutjs.com/documentation/click-binding.html

8
Matt Shepherd