2017-09-24 2 views
0

ユーザーがdivをクリックしたときに検出しようとしています。私はcomponent.htmlフォーカスアウトとブラーがアングルで機能しない

<div class="h unselected" contenteditable="false" (mousedown)="mousedown($event)" (mouseup)="mouseup($event)" (focusout)="focusout($event)" (blur)="focusout($event)"> 
    Hello 
    </div> 

component.tsにこのコードを追加focusout(e)は、私がHello divの外側をクリックしたときに方法が発射されることは決してありません(特に)

focusout(e){ 
    console.log("f out"); 
    } 

を実施しています。何故ですか?私はChromeを使用しています。

答えて

2

の詳細については、divの上tabindexを設定してください。 tabindexは、その要素がフォーカスできるかどうかを示します。

<div tabindex="-1" class="h unselected" contenteditable="false" (mousedown)="mousedown($event)" (mouseup)="mouseup($event)" (focusout)="focusout($event)" (blur)="focusout($event)"> 
    Hello 
    </div> 

なぜ-1? Mozillaのウェブドキュメントによれば

負の値(通常のtabindex =「 - 1」)要素が フォーカス可能でなければならないが、シーケンシャルキーボード ナビゲーションを介して到達可能であってはならないことを意味します。 JavaScriptを使用してアクセス可能なウィジェットを作成するのに大変便利です。

tabindex = "0"は、キーボードのナビゲーション のシーケンシャルに要素をフォーカス可能にする必要があることを意味しますが、その順序はドキュメントのソース の順序で定義されます。

正の値を指定すると、 のキーボードナビゲーションでフォーカスを合わせることができ、その順序は の値で定義されます。つまり、tabindex = "4"は、tabindex = "5"、 の前にフォーカスされますが、tabindex = "3"の後はフォーカスされます。複数の要素が同じ正の tabindex値を共有している場合、それらの相対的な順序は文書ソースの の位置に従います。

関連する問題