Javascript 单击Jquery中搜索结果以外的任何位置时隐藏搜索结果

我正在尝试创建一个Gmail风格的搜索栏。基本上是一个搜索栏，允许用户键入搜索结果并在下拉式弹出窗口中显示结果。见下图

在这种设计中，如果单击页面中的任何位置，我希望隐藏搜索结果。但是如果我点击搜索结果，我想做一些其他的工作，打开一个小的模式弹出窗口，设置一些会话变量等等

下面是我提出的设计和活动结构

<div onfocusout="return HideSearchResultBox(this,event);">
<input type="text" id="MainPageSearchBar" placeholder="Search here..." oninput="return DisplaySearchResult();" onfocus="return DisplaySearchResultBox();"/>
 <div class="card searchresultcard" style="width:100%">
 <div class="card-body p-2" id="searchResultDisplayDiv">
 </div>
 </div>
 </div>

下面是我用来生成结果项的代码

<div id="SearchBarResult' + someID + '" onclick="return OpenSearchResultTab(' + someID + ');">
<label> DisplayText <span class="badge badge-pill badge-accent" style="float:right">Member</span></label>
<label> SubText</label>
</div>

基本上，当包含搜索框和结果的主div失去焦点时，我试图用搜索结果隐藏div，这很好

问题是，当我点击搜索结果时，包括搜索框和结果在内的主div的onfocusout事件仍然会被触发。因此，如果我点击一个搜索结果，div就会关闭，搜索结果的click事件永远不会被触发

我尝试了stackoverflow本身的一些建议，比如将onfocusout事件移动到主容器div，或者使用mouseup事件。但问题依然存在。我试图找到事件目标，但每次都是空的

编辑：

---

我尝试删除隐藏搜索结果的代码，然后搜索结果项的单击事件可以正常工作。因此，如果我隐藏搜索结果，则不会触发click事件

当搜索栏失去焦点时，您需要检查鼠标是否在搜索结果中， 尝试如下：

  let flag=false;
//code of on over of search result item
function handleMouseOver(){
 flag=true
}
//code for mouse leave of search result item
function handleMouseLeave(){
 flag=false;
}
//you focus out event of search box
function hadleFocusOut(){
 if(flag){
  //do not hide search result,focus goes to search result item
  //allow user to select search result item
 }else{
  //hide search result
 }
}

---

您需要检查是否在搜索区域外单击

$document.onclick touchstart，function e{ var t=$e.target.最近的'SearchBoxContainer'； var exceptDiv=$'SearchBoxContainer'； 如果exceptDiv.ist==false{ //第二组 $'searchResultDisplayDiv'。隐藏； } }; 函数DisplaySearchResultBox{ $'searchResultDisplayDiv'。显示； } 功能剂量测定法{ 警惕“做点什么”； } 这是搜索结果 这是搜索结果 这是搜索结果 这是搜索结果 这是搜索结果 这是搜索结果 这是搜索结果

---

在上面的例子中，search DOM元素得到了明确的指示，一旦焦点丢失，就关闭search div。需要更改方法以实现所需的功能

一种方法是，在文档主体上添加一个事件处理程序，检查单击事件是否不是从搜索结果触发的，然后关闭搜索容器

---

希望这能有所帮助。

请单击[]代码段编辑器并提供感谢。这就是我错过的。在鼠标上方设置标志是确定事件目标的最简单方法。