2

私はこれで何時間も立ち往生しています。選択をクリックするとチェックボックスフィールドがポップアップし、他の場所をクリックするとこのフィールドが消えるフォームの一部を作成する必要があります。選択をクリックした後にフィールドにフォーカスを合わせてこれを行いたいのですが、何らかの理由で、チェックボックスフィールドの他の場所をクリックしたときだけでなく、チェックボックスINSIDEのラベルをクリックしたときでも、チェックボックスフィールドがフォーカスを失いますそれの。したがって、問題は、ラベルをクリックした要素にフォーカスしていて、フォーカスされた親要素が何らかの理由でフォーカスを失うことです。

コード: http://jsfiddle.net/RELuL/2/

どんな助けでも大歓迎です！

PS:

おまけの質問:) ご覧のとおり、選択入力をクリックすると、非表示のチェックボックスセクションが少し遅れて表示され、すぐに表示されず、少し見栄えが悪くなります。これを最適化するためのヒントはありますか？

編集：Firefox 13.0.1を使用しています

4

2 に答える 2

4

をクリックする<label>と、ブラウザは関連する入力フィールドにフォーカスします。したがって、フォーカスは親を離れてチェックボックスに移動します (そして、blur イベント ハンドラーが呼び出されます)。

親 div に焦点を合わせてぼやけていることに頼る代わりに、クリック ハンドラーをドキュメントに添付します。

$(document).click(function() {
    multiSelectUpdate();
});

$('.multiselect.container').click(function(event) {
    event.stopPropagation(); // prevent click event from reaching document
});

また、Webkit では、クリックし<select>てもクリック イベントは発生しません。回避策は、代わりに focus イベントを使用することです。

デモ

于 2012-06-26T03:43:46.457 に答える
0

2つの簡単な変更でこれが機能するようになりました。最初に、選択ボックスの[リッスン]をクリックして、そのようなマウスダウンリスナーに変更します。

 $('.multiselector').mousedown(function(event) {
        event.preventDefault();
        currentMulti = $(this).attr('id');
        thisOffset = $(this).offset();
        $(this).hide();
        $('#' + currentMulti + '-container')
            .css('top', thisOffset.top + 'px').show().attr("tabindex", -1).focus();
        $(this).addClass('active');
    });

これは、ボックスが表示される前にトリガーされるため、表示されません。

第二に、ぼかしリスナーは、子供がフォーカスアウトにこの変更を修正するためにフォーカスを取得したときにフォーカスを失ったと信じていました。

 $('.multiselect.container').focusout(function() {
        multiSelectUpdate();
    });

これは、セレクターが現在セレクターの子にフォーカスしていてもフォーカスを失った場合にのみ発生します。

フィドルを修正

楽しい ：）

編集

何らかの理由で、ぼかしはFFで複数回発生するため、ぼかしマウスリーブの代わりにこの使用法を回避します。

$('.multiselect.container').mouseleave(function() {
        multiSelectUpdate();
    });
于 2012-06-25T12:22:37.840 に答える