8

バインディングは、に対して定義されたイベントハンドラー（注4を参照）<event>Bubble: falseがある場合にのみ機能するようです。<event>

これがフィドルの例です。

ネイティブハンドラーで十分な特定のイベント（クリック：、、、など）のネイティブハンドラーを持つ要素の場合<textarea>、<a>「偽の」ハンドラーをバインドせずに、<select>バインドを設定することを期待します。clickBubble: false

私の質問は、余分なバインディングなしでこれを達成するための別のノックアウト方法はありますか？

4

1 に答える 1

24

Bubbleハンドラーは実際のバインディングハンドラーではなく、バインディングのオプションとして使用されます（eventバインディングclickはバインディングを呼び出しますevent）。したがって、それらは単独で実行されません。

したがって、「偽の」no-opハンドラーを追加して使用するclickBubbleことも、カスタムバインディングを作成してこれを行うこともできます。

多分次のようなものです：

ko.bindingHandlers.preventBubble = {
    init: function(element, valueAccessor) {
        var eventName = ko.utils.unwrapObservable(valueAccessor());
        ko.utils.registerEventHandler(element, eventName, function(event) {
           event.cancelBubble = true;
           if (event.stopPropagation) {
                event.stopPropagation();
           }                
        });
    }        
};

そして、ちょうど置く：

<input data-bind="preventBubble: 'click'" />

必要に応じて、一連のイベントを受け入れるようにさらに拡張することもできます。

サンプル： http： //jsfiddle.net/rniemeyer/WcXwZ/

于 2012-12-18T22:43:11.997 に答える