1

クリック イベントを持つネストされた div。

ノックアウトjsを使用してバインドしている共通のviewModelオブジェクトにバインドされているネストされたdivがいくつかあります。親と子の div には、親のクリック イベントを含むいくつかのバインディングがあります。親 div クリック イベントは、結果としてデフォルトで非表示になっているいくつかの視覚的な合図を示す要素を選択する方法として機能します。

バインディング コードは次のとおりです。

<div data-bind="foreach : cardElements">

        <div data-bind="if: isArea(),
                attr: { id : ElementName },
                visible: isArea(),
                click : selectElement.bind($data),
                css : { layoutContainer : isEditMode() && isSelected(),
                        drag: isEditMode(),
                        selectedElement : isSelected() && isEditMode() },
                style : defaultStyle()">

 ... visuals elided for clarity(hidden by default viewable when parent is selected)

        @* Regular display fields. *@
        <div data-bind="if: isInput(),
                    attr : { contenteditable : isEditMode() },
                    visible : isInput(),
                    css: { layoutDiv :  isEditMode() },
                    style: { cursor : 'text' },
                    text: Value">
        </div>


 ... visuals elided for clarity

    </div>
</div>

クリックイベント後のトラブルにフォーカス。

マウス ボタンを押したままにすると、カーソル (テキスト カーソル) が contenteditable div に表示され、クリック後に終了するはずです。リリースすると、フォーカスが失われ、カーソルが消えます (入力要素を使用してみましたが、同じ問題が発生します)。アイデアは、マウスダウン/クリックにより、テキストを入力するためにカーソルを目的の位置に配置する必要があるということです。

親クリックイベントの削除

親のクリック イベントを削除すると、それがなくても contenteditable div 内の選択が意図したとおりに機能し、クリック後に入力を通常どおり続行できることがわかります。ただし、視覚的な合図は設定されていません。もちろん、これがクリック イベント ハンドラの主な仕事です。

クリックイベント中にフォーカスが失われる理由を知っている人はいますか?

たぶん、ハックが機能する可能性が あります。私がまだ試みていないハックの 1 つは、div 自体の上のカーソル位置に基づいて、contenteditable div にフォーカスを設定することです。これは些細なハックではないようですし、それが可能であることさえ知りません。

この件に関して、どんな助けでも大歓迎です。

近づいてるかも

少し回帰テストを行うことで、それを絞り込むことができました。親divからcssスタイルを削除すると、いつものようにクリックされるようです。

以下を削除しました。

 css : { layoutContainer : isEditMode() && isSelected(),
                        drag: isEditMode(),
                        selectedElement : isSelected() && isEditMode() },

これにより、まだ不完全な動作が残っています。

それは可能性が？

親クラスが追加されると、contenteditable div からフォーカスが失われるようです。

使用されるコードの一部を次に示します。
... // マップされた関数。

this.isSelected = ko.dependentObservable(function () {
    return (this === viewModel.selectedCardElement());
}, this);

this.selectElement = function (element, evt) {
     viewModel.selectedCardElement(element);
},

selectElementは呼び出された関数であり、isSelectedはテンプレートにバインドされたカード要素にアタッチされたdependentObservable であることに注意してください。viewModel.selectedCardElementがキャレット位置フォーカスに設定され、ビューで失われるとすぐに私には思えます。

4

0 に答える 0