jQuery: fire click () prima dell'effetto blur ()

Ho un campo di input, dove provo a dare suggerimenti per il completamento automatico. Il codice sembra

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

blur()All'evento dell'ingresso voglio nascondere il div dei risultati:

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

Quando scrivo qualcosa nel mio input invio richiesta al server e ottengo una risposta json, analizzandola in ul-> li struttura e inserisco questo ul nel mio #myresultsdiv.

Quando faccio clic su questo elemento li analizzato, voglio impostare il valore da li per inserire e nascondere #myresultsdiv

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

Tutto sta andando bene, ma quando faccio clic sul mio blur()evento li si attiva prima click()e il valore dell'input non ottiene l'html di li.

Come posso impostare un click()evento prima blur()?

Soluzione 1

Ascolta mousedowninvece di click.

Gli eventi mousedowne blursi verificano uno dopo l'altro quando si preme il pulsante del mouse, ma clicksi verificano solo quando lo si rilascia.

Soluzione 2

È possibile preventDefault()in mousedownper bloccare la discesa dal rubare messa a fuoco. Il leggero vantaggio è che il valore verrà selezionato quando si rilascia il pulsante del mouse, ovvero come funzionano i componenti di selezione nativi. 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();
});

$(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();
}

VIOLINO

Ho affrontato questo problema e l'utilizzo mousedownnon è un'opzione per me.

Ho risolto questo problema utilizzando setTimeoutla funzione gestore

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

Ho appena risposto a una domanda simile: https://stackoverflow.com/a/46676463/227578

Un'alternativa alle soluzioni di mousedown è che ignora gli eventi di sfocatura causati facendo clic su elementi specifici (ad esempio, nel gestore della sfocatura, salta l'esecuzione se è il risultato di un clic su un elemento specifico).

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

Le soluzioni Mousedown non funzionano per me, quando faccio clic su elementi non pulsanti. Quindi, ecco cosa ho fatto con la funzione di sfocatura nel mio codice:

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