Jquery选择多个事件

您好，我有一个搜索框，当我输入字母时，会出现一个下拉列表（id=gohan），其中包含一个ul和许多li“搜索结果”。我希望在下拉列表或搜索框上的焦点消失时，下拉列表消失（即他们单击搜索框/ul/li中不存在的内容）。这两个事件处理程序可以单独工作，但我不知道如何使它们一起工作。我试着像这样把它们串在一起

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

---

但这导致了灾难性的失败。关于修复此问题的条件/选择器有什么想法吗？我还尝试将下拉列表和搜索框封装到一个包含它们的div中，并选择大容器，但这也不起作用。如果搜索框没有失焦，那么必须再次检查下拉列表是否也失焦。只有这样，如果两者都不对焦，才可以隐藏。这是正确的逻辑吗？

如果您只是查看document.body的点击和焦点，然后检查激发事件的目标，那么隐藏您的

#gohan

会更容易。基本上，如果用户单击或关注不在“小部件”或一组“小部件元素”内的内容，则隐藏控件并让用户继续执行他们正在执行的操作

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

根据您的DOM和正在监视的元素，您可能还可以检查searchbox/下拉列表的祖先，只需检查目标元素是否有特定的祖先

例如：

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


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

---

这样，如果您的小部件演变为包含其他控件，那么使用这些新控件将不会隐藏小部件（只要它们位于同一个祖先中，即某个父div）。

HTML的结构是什么？如果您想检查特定的类或ID，可以将其缩短为：var isMyWidget=$（e.target）。是吗(“#myId，#myseconded”）；这可以用

.on（）

语句编写：

$（'body'）。on（'click focus'，'：not（.searchbox，.dropdown'），function（）{$（'.#gohan'）.hide（）；

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