140

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

<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()ですか？

4

5 に答える 5

329

解決策1

mousedownの代わりに聞いてくださいclick。

mousedownandイベントは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();
});
于 2012-05-18T13:02:25.773 に答える
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();
}

フィドル

于 2012-05-18T13:19:24.457 に答える
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');
        });
于 2016-04-13T10:06:26.810 に答える
2

私はちょうど同様の質問に答えました：https ：//stackoverflow.com/a/46676463/227578

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

$("#myinput").live('blur',function(e){
     if (!e.relatedTarget || !$(e.relatedTarget).is("#myresults ul li")) {
         $("#myresults").hide();
     }
});
于 2017-10-10T21:51:46.753 に答える
0

ボタン以外の要素をクリックすると、マウスダウンソリューションが機能しません。これが私のコードのblur関数で行ったことです：

.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;
*/
});
于 2015-02-12T16:29:53.433 に答える