Действие при размывании, за исключением случаев, когда конкретный элемент щелкнул с помощью jQuery

В игре есть два элемента:

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

Я хочу скрыть список, когда вход больше не имеет фокуса, например:

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

Это отлично работает, если не щелкнуть элемент списка, потому что событие blur запускает и скрывает список до того, как клик зарегистрирован. Цель состоит в том, чтобы список оставался видимым при нажатии любой части списка, даже если это приведет к размытию ввода.

Как я могу это сделать? Спасибо!

Ответ 1

Вы можете выполнить это, сохранив глобальную переменную и setTimouts, чтобы ждать задержку в 200 мс, а затем проверить, имеет ли один из двух элементов фокус.

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

Ответ 2

Вы должны иметь возможность сказать "сделайте это размытие(), если только список не будет сфокусирован в одно и то же время".

В этом вопросе указывается, как определить, имеет ли элемент фокус: Использование jQuery для проверки наличия фокуса ввода

Затем вам нужно всего лишь:

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

Ответ 3

Я столкнулся с одной и той же проблемой, так вот как я ее решил.

Я пришел к выводу, что blur() срабатывает раньше click().

Итак, я попытался изменить click() на mousedown() и обнаружил, что mousedown() срабатывает перед blur().

И для подражания click() вам нужно запустить mousedown(), а затем mouseup()

Итак, в вашем случае я бы сделал что-то вроде этого:

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')

    }
});

Демо/пример: http://jsfiddle.net/bbrh4/

Надеюсь, что это поможет!

Ответ 4

Лучший способ сделать это - присоединить обработчик события к элементу body, затем другой обработчик в список, который останавливает распространение событий:

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

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

Слушает за клик вне #myInput и скрывает #myList. В то же время вторая функция прослушивает щелчок на #myList, и если это происходит, это предотвращает стрельбу hide().