jQuery: clic de fuego () antes del evento blur ()

Tengo un campo de entrada, donde trato de hacer una sugerencia de autocompletar. El código se parece a

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

En el blur()evento de entrada, quiero ocultar los resultados 'div:

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

Cuando escribo algo en mi entrada, envío una solicitud al servidor y obtengo una respuesta json, la analizo en la estructura ul-> li y pongo esta ul en mi #myresultsdiv.

Cuando hago clic en este elemento li analizado, quiero establecer el valor de li para ingresar y ocultar #myresultsdiv

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

Todo va bien, pero cuando hago clic en mi blur()evento li se activa antes click()y el valor de entrada no obtiene el html de li.

¿Cómo puedo configurar un click()evento antes blur()?

Solución 1

Escuche en mousedownlugar de click.

Los eventos mousedowny blurse producen uno tras otro cuando presiona el botón del mouse, pero clicksolo ocurre cuando lo suelta.

Solución 2

Puede preventDefault()en mousedownbloquear el menú desplegable de robar el foco. La ligera ventaja es que el valor se seleccionará cuando se suelte el botón del mouse, que es cómo funcionan los componentes de selección nativos. 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();
}

VIOLÍN

Enfrenté este problema y usar mousedownno es una opción para mí.

Resolví esto usando setTimeoutla función de controlador

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

Acabo de responder una pregunta similar: https://stackoverflow.com/a/46676463/227578

Una alternativa a las soluciones de mousedown es hacer que ignore los eventos de desenfoque causados ​​al hacer clic en elementos específicos (es decir, en su controlador de desenfoque, omita la ejecución si es el resultado de hacer clic en un elemento específico).

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

Las soluciones de mousedown no me funcionan cuando hago clic en elementos que no son botones. Entonces, esto es lo que he hecho con la función de desenfoque en mi código:

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