如果单击 DOM 中的任何位置，则隐藏 div答案

【问题标题】：hiding div if clicked anywhere in DOM如果单击 DOM 中的任何位置，则隐藏 div
【发布时间】：2014-06-12 19:20:19
【问题描述】：

我的应用程序中有一个文本框，onkeyup 我显示了一个从数据库获取结果的 div。因此，每当用户输入我显示 div 的内容时，问题是如果用户单击 DOM 中的其他位置，我想隐藏 div。就像当你选择一个下拉菜单时，如果你点击其他地方，下拉菜单就会关闭。在 jquery 或 javascript 中是否有任何内置机制？

【问题讨论】：

标签： javascript jquery html events dom

【解决方案1】：

$( "body" ).click(function() {
  $( "#yourDivIdHere" ).hide();
});

https://api.jquery.com/hide/

【讨论】：

我在 div 上也有一些元素，如果有人点击 BODY，它会隐藏 div。如果有人点击 div 内的元素，它也会隐藏 div
然后将 body 更改为您想要的任何元素。您可以在 DOM 中的某处创建 <button> 并更改为 $("button")。或者，给你的元素一个 ID 并使用$("#ElementIdHere")。
完全不明白
@user1765876 给要隐藏的 div 一个 id <div id="hideme"> 然后使用 $("#hideme")

【解决方案2】：

使用event delegation 并检查点击事件的发起者。比如：

$('body').on('click',function (e) {
  var origin = e.target || e.srcElement;
  if (/* [origin.id != your dropdowndiv.id] */) {
     /* hide your dropdowndiv */
  }
});

【讨论】：

【解决方案3】：

试试这个。演示：http://jsbin.com/xatanicu/4/edit

$(document).ready(function() {
    $('input').focusout(function() {
        $(document).click(function(e) {
            var targetId = $(e.target)[0].id;
            if((targetId !== 'hide-div')) {
                $('div').hide();
            }
        });
    });
});

【讨论】：

如果输入的是一个按钮呢？
focusout 如果我点击任何其他区域有效，但如果我点击 div ，它仍然会隐藏 div。
只看到这个jsbin.com/xatanicu/5/edit，点击按钮，2-点击其他地方，3-再次点击按钮，它不会显示div，就像它在步骤1中显示的那样

【解决方案4】：

文本框失去焦点时可以隐藏结果div：

//vanilla JavaScript
textBoxId.onblur = divId.style.display = 'none';

//jQuery
$("#textBoxId").blur(function() {
  $("#divId").hide();
});

更新：如果用户单击结果 div 本身，它不应该隐藏结果 div。（答案基于Action on blur except when specific element clicked with jQuery）

var keepFocus = false;
function hideList(){
    if(!keepFocus){
        $('#divId').hide();
    }
}

$('#textBoxId').blur(function() {
    keepFocus = false;
    window.setTimeout(hideList, 100);
}).focus(function(){
    keepFocus = true;
});


$('#divId').blur(function() {
    keepFocus = false;
    window.setTimeout(hideList, 100);
}).click(function(){
    keepFocus = true;
});

在此处查看此解决方案的实际效果： http://jsfiddle.net/XC2D7/

【讨论】：

这种方法的优点是它不仅可以通过单击某处起作用，而且如果用户通过按键盘上的“Tab”离开文本框也可以工作。
如果你使用 jQuery 是的。我也添加了 jQuery 代码。
@sap blur 如果我点击任何其他区域有效，但如果我点击 div ，它也会隐藏 div 然后..