我有一个显示 DIV 的 JavaScript（将其显示 css 属性从“无”设置为“正常”。有没有办法让它获得焦点，这样当我点击页面上的其他位置时，DIV 会丢失焦点和它的显示属性设置为无（基本上隐藏它）。我正在使用 JavaScript 和 jQuery
【问题讨论】：
normal 不是display 的属性值。因此，请访问 [W3C 网站][1] 以查找有效值。 [1]：w3schools.com/css/pr_class_display.asp
标签： javascript jquery html
用于在单击页面上除 selecteddiv 之外的任何位置时隐藏 div
$(document).not("#selecteddiv").click(function() {
$('#selecteddiv').hide();
});
如果你想隐藏失去焦点的 div 或用动画模糊，那么也
$("#selecteddiv").focusout(function() {
$('#selecteddiv').hide();
});
有动画
$("#selecteddiv").focusout(function() {
$('#selecteddiv').animate({
display:"none"
});
});
希望对你有帮助
【讨论】：
不幸的是，如果您的网站上有 iframe，然后在 iframe 内单击，则上述示例将不起作用。将事件附加到文档只会将其附加到您的元素所在的同一文档。
您也可以将其附加到您正在使用的任何 iframe，但如果 iframe 已从其他域加载内容，大多数浏览器将不允许您这样做。
最好的方法是复制 jQuery UI 菜单栏插件中的内容。
基本示例 HTML：
<div id="menu">Click here to show the menu
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
而 jQuery 需要让它工作：
var timeKeeper;
$('#menu').click(function()
{
$('#menu ul').show();
});
$('#menu ul').click(function()
{
clearTimeout(timeKeeper);
});
$('#menu').focusout(function()
{
timeKeeper = setTimeout(function() {$('#menu ul').hide()}, 150);
});
$('#menu').attr('tabIndex', -1);
$('#menu ul').hide();
它的作用是给菜单一个标签索引，这样它就可以被认为是有焦点的。现在您已经完成了，您可以使用菜单上的 focusout 事件处理程序。每当它被认为失去焦点时，它就会触发。不幸的是，单击某些子元素会触发 focusout 事件（例如单击链接），因此如果单击了任何子元素，我们需要禁用隐藏菜单。
因为 focusout 事件在任何子元素的点击事件之前被调用，实现这一点的方法是在隐藏元素之前设置一个小的超时，然后点击任何子元素应该清除这个超时，这意味着菜单不会不要被隐藏。
【讨论】：
$(document).mouseup(function (e)
{
var container = $("YOUR CONTAINER SELECTOR");
if (!container.is(e.target)&& container.has(e.target).length === 0)
{
container.hide();
}
});
【讨论】：
您可以在点击 body 时绑定一个函数，并使用 e.target 检查其是否为当前 div（e 是事件）
$(document).ready(function () {
$("body").click(function(e) {
if($(e.target).attr('id') === "div-id") {
$("#div-id").show();
}
else {
$("#div-id").hide();
}
});
});
【讨论】：
$(document).ready 调用中
关于鼠标点击，请参阅其他答案。
但是关于失去焦点，.focusout 不是要附加的事件，而是 .focusin。为什么？考虑以下弹出窗口：
<div class="popup">
<input type="text" name="t1">
<input type="text" name="t2">
</div>
从 t1 移动到 t2 会发生什么：
focusout，冒泡到$('.popup').focusout
focusin，冒泡到$('.popup').focusin
...所以即使焦点完全停留在弹出窗口内，您也会获得这两种类型的事件。
解决方案类似于使用.click 完成的魔术：
$(document).ready(function() {
$('html').focusin(function() {
$('.popup').hide();
});
$('.popup').focusin(function(ev) {
ev.stopPropagation();
});
});
（旁注：我发现 .not(...) 解决方案在事件冒泡之前不起作用）。
奖励：工作小提琴click me - 打开弹出窗口，然后尝试在输入中切换。
【讨论】：
我也在寻找这个，在这里我找到了解决方案https://api.jquery.com/mouseleave/。这可能对未来的读者有用。
mouseleave 事件与 mouseout 处理事件冒泡的方式不同。如果在此示例中使用 mouseout，则当鼠标指针移出 Inner 元素时，将触发处理程序。这通常是不受欢迎的行为。另一方面，mouseleave 事件仅在鼠标离开其绑定的元素而不是后代元素时触发其处理程序。
【讨论】：
在触发 mouseup() 事件时，我们可以检查点击是在 div 内还是在后代内，并采取相应的行动。
$(document).mouseup(function (e) {
var divContent= $(".className");
if(!divContent.is(e.target) && divContent.has(e.target).length === 0) {
$(".className").hide();
}
});
【讨论】：
我个人没有在 div 上尝试过模糊，仅在输入等方面尝试过。如果模糊事件处理程序有效，那就完美了，可以使用它。如果没有，您可以检查一下： jQuery animate when <div> loses focus
【讨论】：
$('.menu > li').click(function() {
$(this).children('ul').stop().slideDown('fast',function()
{
$(document).one('click',function()
{
$('.menu > li').children('ul').stop().slideUp('fast');
});
});
});
【讨论】：
显示很容易
$('somewhere').click(function {$('#foo').show();})
为了隐藏
【讨论】：
使用 jQuery，您可以使用 hide() 隐藏元素，例如：$("#foo").hide()
在事件监听器中隐藏元素：
$("#foo").blur(function() {
$("#foo").hide();
});
【讨论】：