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

Posted 2023-05-09

【中文标题】如果单击 DOM 中的任何位置，则隐藏 div

【英文标题】：hiding div if clicked anywhere in DOM

【发布时间】：2014-06-12 19:20:19

【问题描述】：

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

【参考方案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 然后..