azione sulla sfocatura tranne quando elemento specifico cliccato con jQuery

Question

ci sono due elementi in gioco:

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

voglio nascondere la lista quando l'ingresso non è attivo, in questo modo:

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

Funziona alla grande, tranne quando viene cliccato un elemento della lista, perché l'evento di sfocatura spara e nasconde l'elenco prima che il clic sia registrato. L'obiettivo è che l'elenco rimanga visibile quando si fa clic su qualsiasi parte dell'elenco, anche se ciò causerebbe l'offuscamento dell'input.

Come posso fare questo? Grazie!

Answer 1

È possibile ottenere questo mantenendo una variabile globale, e setTimouts, a attendi un ritardo di 200 ms e poi controlla se uno dei 2 elementi è attivo.

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

Devi essere in grado di dire "fai questo sfocatura() a meno che la lista non si concentri nello stesso momento".

Questa domanda dice come rilevare se un elemento è attivo: Using jQuery to test if an input has focus

Poi tutto quello che dovete fare è:

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

Answer 3

Il modo migliore per farlo è quello di collegare un gestore di eventi per l'elemento del corpo, poi un altro gestore per la lista che si ferma la propagazione evento:

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

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

Questa ascolta per un clic al di fuori del # myInput e nasconde #myList. Allo stesso tempo, la seconda funzione ascolta un clic su #myList e se si verifica impedisce l'attivazione di hide().

Answer 4

Ho affrontato lo stesso identico problema, quindi ho risolto il problema.

Mi è venuto in mente che lo blur() scatta prima di click().

Così ho cercato di cambiare click() a mousedown() e abbiamo scoperto che mousedown() incendi prima blur().

E per imitare click() dovrete sparare mousedown() e poi mouseup()

Quindi nel tuo caso vorrei fare qualcosa di simile:

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/esempio: http://jsfiddle.net/bbrh4/

Speranza aiuta!