Hay dos elementos en juego:
$('#myInput') // an input field for search $('#myList') // a list to display search resultsQuiero ocultar la lista cuando la entrada ya no tiene 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 se activa y oculta la lista antes de que se registre 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 vea borrosa.
¿Cómo puedo hacer esto? ¡Gracias!
Puede lograr esto manteniendo una variable global y configurandoTimouts, para esperar un retraso de 200 ms y luego verificar si uno de los 2 elementos tiene el 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; });Me he enfrentado exactamente al mismo problema, así que así es como lo resolví.
Se me ocurrió el hecho de que blur() se dispara antes que click() .
Así que traté de cambiar click() a mousedown() y descubrí que mousedown() dispara antes que blur() .
Y para imitar click() tendrás que disparar mousedown() y luego mouseup()
Así que en tu caso yo haría 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') } });Demostración/ejemplo: http://jsfiddle.net/bbrh4/
¡Espero eso ayude!
Debe poder decir "hacer este desenfoque () a menos que la lista se enfoque al mismo tiempo".
Esta pregunta dice cómo detectar si un elemento tiene foco: Usar jQuery para probar si una entrada tiene foco
Entonces todo lo que necesitas hacer es:
$("#myInput").blur(function () { if (!$("#myList").is(":focus")) { $("#myList").hide(); } });