wake-up-neo.com

jQuery: Feuerklick () vor dem Ereignis blur ()

Ich habe ein Eingabefeld, in dem ich versuche, Vorschläge für die automatische Vervollständigung zu machen. Code sieht aus wie

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

Beim blur() -Ereignis der Eingabe möchte ich das div der Ergebnisse ausblenden:

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

Wenn ich etwas in meine Eingabe schreibe, sende ich eine Anfrage an den Server und erhalte eine Antwort von json, parse diese in die ul-> li-Struktur und setze diese ul in mein div #myresults.

Wenn ich auf dieses analysierte li-Element klicke, möchte ich den Wert von li für die Eingabe festlegen und #myresults Div ausblenden

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

Alles läuft gut, aber wenn ich auf mein li blur() -Ereignis klicke, wird es ausgelöst, bevor click() und der Eingabewert den HTML-Code von li nicht erhalten.

Wie kann ich ein click() -Ereignis vor blur() einrichten?

jqueryclickonblur
124
Egor Sazanovich

Lösung 1

Hören Sie mousedown anstelle von click.

Die Ereignisse mousedown und blur treten nacheinander auf, wenn Sie die Maustaste drücken, aber click tritt nur auf, wenn Sie die Maustaste loslassen.

Lösung 2

Sie können preventDefault() in mousedown verwenden, um zu verhindern, dass das Dropdown-Menü den Fokus stiehlt. Der leichte Vorteil ist, dass der Wert beim Loslassen der Maustaste ausgewählt wird. So funktionieren native Auswahlkomponenten. 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();
});
287
Alexey Lebedev

Ich habe gerade eine ähnliche Frage beantwortet: https://stackoverflow.com/a/46676463/227578

Eine Alternative zu den Abwärtsbewegungen besteht darin, Unschärfeereignisse zu ignorieren, die durch Klicken auf bestimmte Elemente verursacht werden (Überspringen Sie die Ausführung in Ihrem Unschärfehandler, wenn dies auf das Klicken auf ein bestimmtes Element zurückzuführen ist).

$("#myinput").live('blur',function(e){
     if (!e.relatedTarget || !$(e.relatedTarget).is("#myresults ul li")) {
         $("#myresults").hide();
     }
});
2
dule
$(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();
}

[~ # ~] Geige [~ # ~]

2
adeneo

Ich war mit diesem Problem konfrontiert und die Verwendung von mousedown ist für mich keine Option.

Ich habe dies gelöst, indem ich setTimeout in der Handler-Funktion verwendet habe

        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');
        });
1
geckob

Mousedown-Lösungen funktionieren bei mir nicht, wenn ich auf Elemente klicke, die keine Schaltflächen sind. Also hier ist, was ich mit der Unschärfefunktion in meinem Code gemacht habe:

.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;
*/
});
0
Andriy