3

私はあなたがテキストを書くことを可能にしそしてあなたがボタンをクリックするとき何かをするポップアップダイアログを持っています。私のコードは以下の通りです

この関数は機能します。e.originalEvent.explicitOriginalTargetを見て新しいオブジェクトを見つけます。ただし、タブを押すとこの関数が呼び出されますが、e.originalEvent.explicitOriginalTargetは、新しいオブジェクトではなく、同じ現在のオブジェクトを提供します。そのため、ユーザーがTabキーを押して終了しても、ダイアログは閉じません。正しい新しいdomアイテムを見つけるにはどうすればよいですか？

$('#Area').focusout(function (e) {
    if ($(e.originalEvent.explicitOriginalTarget).closest('#Area').size() == 0)
        $('#Area').hide();
});
4

2 に答える 2

17

event.relatedTargetは私のために働いた。イベント内に他のDOM要素がある場合は、それを提供します。

たとえば、同じ機能を制御する2つのボタンがあり、それらが連続してクリックされた場合にそれらのコードが実行されることを望まない場合です。フォーカスアウトイベントハンドラーをアタッチして、IDまたはクラス名を確認できます。

$(".buttons").on("focusout", function (event) {
    if($(event.relatedTarget).prop("class").indexOf("buttons") === -1) {
        //code to execute
    }
});

おそらくより良い例は私が持っていた問題でしょう。

横にボタンがあるカスタムドロップダウンリストを作成しました。ドロップダウンリストは、リストをクリックするか、ボタンをクリックすることで開閉できます。どちらかのオブジェクトへのフォーカスを失って閉じることもできます。

これは、次のシナリオで問題になります。1）ユーザーがリストオブジェクトをクリックしてドロップダウンリストを開きます。2）ユーザーがボタンをクリックしてドロップダウンリストを閉じます。

何が起こるかというと、リストが開きますが、ユーザーがリストを閉じようとすると、リストはフォーカスを失い、リストを閉じますが、ボタンをクリックしているため、リストは元に戻ります。このタイプのシナリオでは、フォーカスアウトにより2つのオブジェクトが互いに打ち消し合います。

focusoutイベントを作成することで、relatedTargetがイベントを呼び出したターゲットと同じクラスを持たない場合にのみトリガーするように設定できるようになりました。

$(".listControl").on("focusout", function (event) {
    if($(event.relatedTarget).prop("class").indexOf("listControl") === -1) {
        //Close the drop down list
    }
});

http://api.jquery.com/event.relatedTarget/

于 2013-09-19T15:27:33.217 に答える
2

この質問/回答をチェックしてくださいjQueryでそれに焦点を当てている要素を選択する方法

$（ "*：focus"）;で何も得られない理由だと思います。Firebugコンソールでは、コンソールをクリックすると、要素がフォーカスを失います。

そして、イベントでそれに取り組みたい場合、focus（）の反対はblur（）です。

編集

たぶん、別のアプローチを試すこともできます。タブキーを監視することが唯一の懸念事項である場合は、.keypress（）イベントを使用して、9であるタブキーコードを監視できます。

于 2011-01-20T17:48:47.873 に答える