0

一連の編集フィールド（テキスト、チェックボックスなど）を含むテーブルレイアウトを持つコンテナー（フォーム内）があります。

ユーザーがコンテナの外側（たとえばメニュー項目）をクリックしたときにキャプチャする必要があります。現在、コンテナにはイベントハンドラはありません。

4

3 に答える 3

5

これは古い質問だと思いますが、最近同じ問題に遭遇したので、仲間の患者を助けようと思いました.

私は何時間もの間、ほとんど機能しているように見えるさまざまなぼかしおよびクリックイベントリスナーを作成することに行き詰まりました。フォーカスが子要素にある場合でも発生するため、ぼかしは失敗します。クリックは機能しましたが、キーボード ナビゲーションを処理しませんでした。

私の最終的な解決策は、ウィンドウ レベルでフォーカス イベントをキャプチャし、フォーカス ターゲットをコンテナーとその子と比較することでした。これは、 addEventListenerをサポートするブラウザーでのみ機能します。私のアプリでは、視聴者が拘束されていたので、IE < 9 について心配する必要はありませんでした。

最初に、フォーカス ターゲットがコンテナーであるか、その子要素であるかを確認する関数を作成します。

var LocalTarget = function( el, target )
{
    if ( el === target )
    {
        return true;
    }
    else if ( el.childNodes )
    {
        var els = el.childNodes;

        for ( var i = 0, n = els.length; i < n; i++ )
        {
            if ( els[i] === target )
            {
                return true;
            }
            else if ( els[i].childNodes )
            {
                if ( LocalTarget(els[i], target) ) return true;
            }
        }
    }

    return false;
};

これは、コンテナ内のすべてのノードを再帰的に比較することに注意してください。

次に、リスナー関数を作成します。

var Listener = function( e )
{
    // Check if receiving element is part of the container.
    if ( !LocalTarget([YOUR CONTAINER], e.target) )
    {
        // Do focus lost stuff here...

        // Remove the event listener. [OPTIONAL]
        window.removeEventListener( 'focus', Listener, window, true );
    }
};

LocalTarget 関数と Listener 関数、および [YOUR CONTAINER] はクロージャーであることに注意してください。

最後に、イベント リスナーを追加します。

window.addEventListener( 'focus', Listener, window, true );

多くの作業が必要なように思え、オーバーヘッドが非常識ですが、これが私が機能させることができる唯一の調合です。それが誰かを助けることを願っています。

于 2014-03-13T17:06:53.847 に答える
-1

jqueryで使用できます$('#container').blur(function() { //some code here });

于 2013-03-14T19:27:21.087 に答える