javascript - ocultar - Acción en desenfoque, excepto cuando se hace clic en un elemento específico con jQuery

onclick jquery ejemplos

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 se dispara y oculta la lista antes de que se registre el clic. El objetivo es que la lista permanezca visible cuando se haga clic en cualquier parte de la lista, aunque esto hará que la entrada se difumine.

¿Cómo puedo hacer esto? ¡Gracias!

Answer 1

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 enfoque: usar jQuery para probar si una entrada tiene enfoque

Entonces todo lo que necesitas hacer es:

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

Answer 2

He enfrentado exactamente el mismo problema, así es como lo resolví.

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

Así que he intentado cambiar click() a mousedown() y descubrí que mousedown() dispara antes de 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!

Answer 3

La mejor manera de hacer esto es adjuntar un controlador de eventos al elemento del cuerpo, luego otro controlador a la lista que detiene la propagación de eventos:

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

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

Esto escucha un clic fuera de #myInput y oculta #myList. Al mismo tiempo, la segunda función escucha un clic en #myList y, si se produce, evita que se encienda hide ().

Answer 4

La respuesta de Pigalev Pavel arriba funciona muy bien.

Sin embargo, si desea una solución aún más sencilla, puede simplemente "evitar la configuración predeterminada" en la "supresión" de un elemento para evitar que se produzca el evento de desenfoque. (¡ya que prevenir la configuración predeterminada en realidad significa que al final, la entrada nunca pierde el enfoque en primer lugar!)

Por supuesto, esto es solo si estás bien con la prevención de la falta de pago en la división. Tiene algunos efectos secundarios, como el texto ya no es seleccionable. Mientras eso no sea un problema, esto funcionará.

Supongo que si mantiene presionado el mouse sobre el div, lo mueve fuera del div, y luego suelta el mouse, tampoco disparará el evento de "desenfoque". Pero en mi caso, tampoco estaba demasiado preocupado por eso, ya que el clic comenzó en el div objetivo.

$("input").focus(function(){
 $(this).val("");
});

$("input").blur(function(){
 $(this).val("blur event fired!");
});

$("div").mousedown(function(e){
 e.preventDefault();
})

div{
  height: 200px;
  width: 200px;
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input>
<div>
Click here to prevent blur event!
</div>

Answer 5

Puede lograr esto manteniendo una variable global, y setTimouts, para esperar un retraso de 200 ms y luego verificar si uno de los 2 elementos tiene enfoque.

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