JQuery выбор нескольких событий

Question

$('.searchbox').blur(function() { 
    $("#gohan").hide(); 
}); 
$('.dropdown').blur(function() { 
    $("#gohan").hide(); 
}); 

Привет, У меня есть поисковый запрос, который при вводе букв появляется выпадающий список (id = gohan), состоящий из ul с многочисленными листами «результатов поиска». Я хочу, чтобы выпадающее меню исчезло всякий раз, когда фокус на выпадающем списке или поисковый ящик исчез, т.е. они нажимают на то, что не находится в searchbox/ul/li. Эти два обработчика событий работают отлично, но я не знаю, как заставить их работать вместе. Я попытался связать их вместе, как

$('.dropdown, .searchbox').blur(function() { 

но это привело к катастрофическому сбою. Любая идея о состоянии/селекторе исправить это? Я также пытаюсь инкапсулировать как раскрывающийся список, так и поисковый ящик в один div, содержащий их, и выбор большого контейнера, но это тоже не сработало. Если поисковая система не находится вне фокуса, тогда должна быть еще одна проверка, чтобы увидеть, не выйдет ли выпадающее меню. Только тогда, если оба не находятся в фокусе, сделайте скрытие. Это правильная логика?

Answer 1

Было бы проще скрыть свой #gohan, если вы только что просмотрели document.body для кликов и фокусировки, а затем проверили цель уволенного события. По сути, если пользователь нажимает или фокусируется на том, что не входит в ваш «виджет» или набор «элементов виджета», вы скрываете свои элементы управления и позволяете пользователю продолжать делать то, что они делают.

var handler = function(e){ 
    var isMyWidget = $(e.target).hasClass('searchbox') || $(e.target).hasClass('dropdown'); 
    if(!isMyWidget){ 
     $('#gohan').hide(); 
    } 
} 


$(document.body).click(handler).focus(handler); 

В зависимости от вашего DOM и элементов вы смотрите, вы также могли бы быть в состоянии сделать проверить родоначальник SearchBox/выпадающее меню и просто проверить, если целевой элемент имеет специфический предок.

Пример:

var isMyWidget = $(e.target).closest('.widgetContainer').length > 0; 

Это сделает это так, что если ваш виджет эволюционирует, чтобы содержать другие элементы управления, с помощью этих новых элементов управления не будет скрывать виджет (пока они находятся в пределах того же предка, то есть некоторые родительский div).