Javascript onfocus / onblur issues

Question

所以我制作了一个小搜索栏，显示下面的结果，如下所示：

<div id='searchWrapper'>
  <div id='Search'>
    <input id="inputSpn" type="input" value="" />
    <input id="searchBtn" type="image" src="/search.png" />
    <br clear='all'/>
  </div>
  <div id='Results'>
  </div>
</div>

我基本上是通过AJAX进行实时搜索。<div id='Results'>最初是隐藏的，直到您键入并填充一些结果。然而，我的问题是当用户点击离开时将其隐藏起来。让它通过onblur消失也不起作用，因为我需要能够点击结果，而不是让它们消失在我身上。不幸的是，我还没能在互联网上找到一个好的非jQuery方法。最简单的说法是：如果点击了除<div id='searchWrapper'>之外的任何内容，我希望结果消失。谢谢

Answer 1

这是一个未优化但有效的非jQuery解决方案

<script>
document.onclick=function(e) {
  var elem = e?e.target:event.srcElement;
  var id = elem.id;
  document.getElementById("inputSpn").value=id+" clicked"; // debug - remove when happy
  // the following could be done by looping over the searchWrapper and its children
  if (id !="searchWrapper" && id!="Search" && id != "inputSpn" && id != "searchBtn" && id != "Results") {
    document.getElementById("Results").style.display="none"
  }
}
</script>
<div id='searchWrapper'>
  <div id='Search'>
    <input id="inputSpn" type="input" value="" />
    <input id="searchBtn" type="image" src="TekTP/icons/search.png" />
    <br clear='all'/>
  </div>
  <div id='Results'>hello
  </div>
</div>

更新：

如果单击包装器div ，则切换

 var hide= (id !="searchWrapper" && id!="Search" && id != "inputSpn" && id != "searchBtn" && id != "Results");
document.getElementById("Results").style.display=(hide)?"none":"block";

Answer 2

向文档添加监听器（使用addEventListener）-JSFidle示例

<style>
#Results {
     display: none;   
}
</style>
<script type="text/javascript">
window.onload = function(){
    document.addEventListener('click', function(event){
        if(document.getElementById('searchBtn') != (event.target) ? event.target : event.srcElement) {
            document.getElementById('Results').style.display = 'none';
        } else {
            document.getElementById('Results').style.display = 'block';
        }
    });
};
</script>
<div id='searchWrapper'>
    <div id='Search'>
        <input id="inputSpn" type="input" value="" />
        <input id="searchBtn" type="button" value="Search"/>
        <br clear='all'/>
    </div>
    <div id='Results'></div>
</div>

但是，如果你打算在你的网站上使用大量的Javascript，你可以考虑使用jQuery——这会让你的生活变得更轻松。