单击屏幕上的任意位置时如何隐藏特定的div答案

【问题标题】：how to hide a specific div when clicking anywhere on screen单击屏幕上的任意位置时如何隐藏特定的div
【发布时间】：2017-04-05 10:42:58
【问题描述】：

我有一个搜索结果 div，其中包含根据用户搜索的搜索结果列表项。但是当用户单击屏幕上的任何位置时，我想隐藏该结果 div。

这是我的搜索 div 代码：

<div id="user_search">
    <div class="inpt-head-place" style="width:9em;">
        <?php echo form_open( '',[ 'class'=>' navbar-left navbar-change','id'=>'search_form']) ?>
        <?php echo form_input([ 'type'=>'text','class'=>'form-control form-media search_user_bar','placeholder'=>'Search Here','name'=>'search']); ?>
    <div id="search_result" class="search_result"> </div>

    </div>
    <div class="inpt-head-place" style="width: 20px;">
        <button class="btn btn-default btn-resize" type="submit" name="submit" id="submit_here"> <i class="fa fa-search"></i> </button>
        <?php echo form_close(); ?>
    </div>
</div>

这里是搜索栏的快照及其结果：

请给我建议.. 谢谢

【问题讨论】：

见stackoverflow.com/questions/4660633/…你可以检查点击是否在该div内，如果它什么都不做，如果它没有隐藏div
How do I detect a click outside an element?的可能重复

标签： javascript jquery html css

【解决方案1】：

您可以通过将点击绑定到document或body来检查被点击的元素或任何子元素是否是被点击的或被点击的子元素：

$(document).on('click', function(e) {
  if (!$('#search_result').is(e.target) && $('#search_result').has(e.target).length === 0){
    $('#search_result').hide();
  }
});

【讨论】：

【解决方案2】：

检查下面的代码，当你在search_result之外点击时，它会隐藏search_result div。

$(document).mouseup(function (e) {
    var container = $("#search_result"); //ID of dic you want to hide 
    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});

【讨论】：

【解决方案3】：

您可以使用 JS 将主体包装在一个 div 中（或仅使用主体），然后向该 div 添加一个点击事件侦听器，如果单击主体，只需关闭搜索结果。有点像，

document.getElementById('body-div').addEventListener("click", function(){
    //set style of search result to display: none or hide in some reasonable way
});

【讨论】：