Acción sobre la falta de definición, excepto cuando el elemento específico hace clic con jQuery

Question

Hay dos elementos en juego:

$('#myInput') // an input field for search 
$('#myList') // a list to display search results 

quiero ocultar la lista cuando la entrada ya no tiene el foco, así:

$('#myInput').blur(function() { 
    $('#myList').hide(); 
}); 

Esto funciona muy bien, excepto cuando se hace clic en un elemento de la lista, porque el evento de desenfoque dispara y oculta la lista antes de registrar el clic. El objetivo es que la lista permanezca visible cuando se hace clic en cualquier parte de la lista, aunque esto hará que la entrada se vuelva borrosa.

¿Cómo puedo hacer esto? ¡Gracias!

Answer 1

Usted puede lograr esto manteniendo una variable global, y setTimouts, a espere un retraso de 200ms y luego verifique si uno de los 2 elementos tiene foco.

var keepFocus = false; 

function hideList(){ 
    if(!keepFocus){ 
     $('#myList').hide(); 
    } 
} 

$('#myInput').blur(function() { 
    keepFocus = false; 
    window.setTimeout(hideList, 200); 
}).focus(function(){ 
    keepFocus = true; 
}); 


$('#myList').blur(function() { 
    keepFocus = false; 
    window.setTimeout(hideList, 200); 
}).focus(function(){ 
    keepFocus = true; 
}); 

Answer 2

Debe poder decir "hacer este desenfoque() a menos que la lista gane enfoque al mismo tiempo".

Esta pregunta dice cómo detectar si un elemento tiene el foco: Using jQuery to test if an input has focus

Entonces todo lo que necesita hacer es:

$("#myInput").blur(function() { 
    if (!$("#myList").is(":focus")) { 
     $("#myList").hide(); 
    } 
}); 

Answer 3

La mejor manera de hacer esto es conectar un controlador de eventos para el elemento del cuerpo, y luego otro manejador de la lista que se detiene de propagación de eventos:

$(body).click(function() { 
    $("#myList").hide(); 
}); 

$("#myList").click(function (e) { 
    e.stopImmediatePropagation(); 
}); 

Esta escucha por un clic fuera de # myInput y oculta #myList. Al mismo tiempo, la segunda función escucha un clic en # myList y, si ocurre, impide que hide() se active.

Answer 4

Me he enfrentado exactamente con el mismo problema, así que así es como lo resolví.

Se me ocurrió el hecho de que blur() dispara antes que .

por lo que he tratado de cambiar click() a mousedown() y descubrió que mousedown() incendios antes blur().

Y imitar click() que tendrá que disparar mousedown() y luego mouseup()

Así que en su caso me gustaría hacer algo como esto:

var click_in_process = false; // global 

$('#myList').mousedown(function() { 
    click_in_process = true; 
}); 

$('#myList').mouseup(function() { 
    click_in_process = false; 
    $('#myInput').focus(); 

    // a code of $('#myList') clicking event 

}); 

$('#myInput').blur(function() { 
    if(!click_in_process) { 
     $('#myList').hide(); 

     // a code of what you want to happen after you really left $('#myInput') 

    } 
}); 

Demo/ejemplo: http://jsfiddle.net/bbrh4/

Esperanza ¡ayuda!