如果在DOM中的任何位置单击隐藏div

Question

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

Answer 1

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

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

Answer 2

使用event delegation并检查点击事件的发起人。类似的东西：

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

Answer 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();
            }
        });
    });
});

Answer 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/