jQuery:blur()イベントの前にclick()を起動する


134

入力フィールドがあり、オートコンプリートの提案を試みます。コードは次のようになります

<input type="text" id="myinput">
<div id="myresults"></div>

入力のblur()イベントで、結果のdivを非表示にしたい:

$("#myinput").live('blur',function(){
     $("#myresults").hide();
});

入力に何かを書き込むと、サーバーにリクエストを送信してjson応答を取得し、それをul-> li構造に解析して、このulを#myresultsdivに配置します。

この解析されたli要素をクリックすると、liの値を入力に設定し、#myresultsdiv を非表示にします

$("#myresults ul li").live('click',function(){
     $("#myinput").val($(this).html());
     $("#myresults").hide();
});

すべてが順調に進んでいますが、クリックしてli blur()イベントをクリックするclick()と、入力の値がliのhtmlを取得しません。

click()以前にイベントを設定するにはどうすればよいblur()ですか?


それで、なぜあなたはぼかし関数を使うのですか?あなたの必要性がクリック機能からすでに満たされているとき。
Owais Iqbal 2012

これにより、イベントが発生する順序はおそらく変更されませんが、blurをクリックした後に実際に発生する場合はli、おそらく$("#myresults").hide()クリックハンドラーで実行する必要はありません。$(this).html()空の文字列が返されているようです。あなたでしたlogalert $(this).html()確認してくださいするには?
veeTrain

@OwaisIqbal時々結果がない、ユーザーが提案から何も選択したくない、時々ユーザーはこの入力をもう使いたくない、しかし私は未使用の結果を隠さなければならない
Egor Sazanovich '18

@veeTrainハンドラーには多くのアクションがあります。質問の問題を簡単に理解できるように、アクションを最小化しました。PS私はファイアバグオンblur()click()ハンドラーにウォッチポイントを追加しようとしましたが、blur()終了後にアクションはありません
Egor Sazanovich '18

関数をキューに入れる必要があるようです。このページをご覧ください:stackoverflow.com/questions/1058158/…。First-In-First-Out(FIFO)の部分はあなたに関係するかもしれません
Patriotec

回答:


312

解決策1

mousedown代わりに聞くclick

mousedownそしてblurイベントのマウスボタンを押したときに次々と発生しますが、clickあなたはそれを解放するときにのみ発生します。

解決策2

あなたは可能preventDefault()mousedownフォーカスを盗むからドロップダウンをブロックします。わずかな利点は、マウスボタンを離したときに値が選択されることです。これにより、ネイティブの選択コンポーネントが機能します。JSFiddle

$('input').on('focus', function() {
    $('ul').show();
}).on('blur', function() {
    $('ul').hide();
});

$('ul').on('mousedown', function(event) {
    event.preventDefault();
}).on('click', 'li', function() {
    $('input').val(this.textContent).blur();
});

12
ソリューション1は、これと同じ状況でうまくいきました。簡単交換!ありがとうございました:)
Jon

ありがとう:)しかし、クリックの代わりにマウスダウンを聞くことが魅力のように機能する理由を説明できますか?
Mudassir Ali 2014

3
@MudassirAliは、mousedownイベントがブラーの前に来て、クリックが後に来るためです。jsfiddle.net/f3BKP
Alexey Lebedev

ソリューション#1は私の意見ではより良い選択です。シンプルで効果的。タイムアウトとは、コード化の意味+予期しない動作の余地(タイムアウトまでの時間?クリックを記録するのに十分な長さですが、使用を混乱させるほど長くはありません...)。
cw24 2014年

5
ソリューション#2は独創的です。私はそれを理解したことはなかっただろう!ありがとう
トビア2015

2
$(document).on('blur', "#myinput", hideResult);

$(document).on('mousedown', "#myresults ul li", function(){
     $(document).off('blur', "#myinput", hideResult); //unbind the handler before updating value
     $("#myinput").val($(this).html()).blur(); //make sure it does not have focus anymore
     hideResult(); 
     $(document).on('blur', "#myinput", hideResult);  //rebind the handler if needed
});

function hideResult() {
     $("#myresults").hide();
}

FIDDLE


2

私はこの問題に直面し、 mousedownすることは私の選択肢ではありません。

これをsetTimeoutハンドラー関数で使用して解決しました

        elem1.on('blur',function(e) {

            var obj = $(this);

            // Delay to allow click to execute
            setTimeout(function () {
                if (e.type == 'blur') {

                  // Do stuff here

                }
            }, 250);
        });

        elem2.click( function() {
            console.log('Clicked');
        });

2

私は同様の質問に答えました: https //stackoverflow.com/a/46676463/227578

マウスダウンソリューションの代わりに、特定の要素をクリックすることによって引き起こされるぼかしイベントを無視します(つまり、ぼかしハンドラーで、特定の要素をクリックした結果である場合は実行をスキップします)。

$("#myinput").live('blur',function(e){
     if (!e.relatedTarget || !$(e.relatedTarget).is("#myresults ul li")) {
         $("#myresults").hide();
     }
});

私の場合、event.relatedTargetはnullを返します。
gaurav5430

:[OK]を、ここに答えましたstackoverflow.com/questions/42764494/...
gaurav5430

0

ボタン以外の要素をクリックすると、マウスダウンソリューションが機能しません。だからここに私が私のコードでぼかし関数でやったことです:

.on("blur",":text,:checkbox,:radio,select",function() {
/*
* el.container 
* container, you want detect click function on.
*/
            var outerDir = el.container.find(':hover').last();
            if (outerDir.length) {
                if ($.inArray(outerDir.prop('tagName'), ["A","SELECT"] ) != -1 || outerDir.prop('type') == 'button' || outerDir.prop('type') == 'submit') {
                    outerDir.click();
                }
                if (outerDir.prop('type') == 'checkbox') {
                    outerDir.change();
                }
                return false;
            }
/*          
* YOUR_BLUR_FUNCTION_HERE;
*/
});
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.