Działanie na rozmycie wyjątkiem sytuacji, gdy określony element kliknięty z jQuery

Question

Istnieją dwa elementy w grze:

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

chcę ukryć listę, gdy na wejściu nie ma już skupić, tak jak poniżej:

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

Działa to znakomicie, z wyjątkiem sytuacji, gdy kliknięto element listy, ponieważ zdarzenie blur wywołuje i ukrywa listę przed zarejestrowaniem kliknięcia. Celem jest, aby lista pozostała widoczna po kliknięciu dowolnej części listy, nawet jeśli spowoduje to rozmycie wejścia.

Jak mogę to zrobić? Dzięki!

Answer 1

Można to osiągnąć poprzez utrzymanie zmienną globalną i setTimouts, aby odczekaj 200 ms, a następnie sprawdź, czy jeden z 2 elementów ma fokus.

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

Musisz móc powiedzieć "zrób to rozmycie(), chyba że lista zyskuje ostrość w tym samym czasie".

To pytanie mówi w jaki sposób wykryć, czy element ma skupić: Using jQuery to test if an input has focus

Następnie wszystko co musisz zrobić, to:

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

Answer 3

Najlepszym sposobem, aby to zrobić, aby dołączyć obsługi zdarzeń do elementu nadwozia, potem drugi teleskopowa do listy, która zatrzymuje propagacji zdarzenia:

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

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

Ten słucha za kliknięcie poza # myInput i ukrywa #myList. W tym samym czasie druga funkcja nasłuchuje kliknięcia na #myList, a jeśli wystąpi, uniemożliwia wypalenie hide().

Answer 4

Mam do czynienia z dokładnie ten sam problem, więc w ten sposób go rozwiązałem.

Wpadłem na pomysł, że blur() wystrzeli wcześniej niż click().

Więc próbowałem zmienić click() do mousedown() i okazało się, że mousedown() pożary przed blur().

I naśladować click() musisz odpalić mousedown() a następnie mouseup()

Więc w twoim przypadku chciałbym zrobić coś takiego:

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/przykład: http://jsfiddle.net/bbrh4/

Nadzieja to pomaga!