Javascript 当DIV失去焦点/模糊时隐藏DIV

我有一个显示DIV的JavaScript（将其display-css属性从“none”设置为“normal”。是否有办法将其设置为焦点，以便当我单击页面上的其他位置时，DIV失去焦点，其display属性设置为none（基本上隐藏它）.我正在使用JavaScript和jQuery

使用jQuery，您可以使用

隐藏（）

，例如：

$（“#foo”）.hide（）隐藏元素

隐藏事件侦听器中的元素：

$("#foo").blur(function() {
    $("#foo").hide();
});

---

我个人没有在div上尝试过blur，只在输入上尝试过。如果blur eventhandler工作正常，那么它是完美的，可以使用它。如果它不工作，您可以查看以下内容： 显示很容易

$('somewhere').click(function {$('#foo').show();})

隐藏

---

您可以单击body绑定一个函数，并使用e.target检查其是否为当前div（e是事件）

---

对于“隐藏div”，单击页面上除所选的div之外的任何位置时隐藏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：

它所做的是为菜单提供一个选项卡索引，以便可以将其视为具有焦点。现在，您可以使用菜单上的focusout事件处理程序。这将在它被视为失去焦点时触发。不幸的是，单击某些子元素将触发focusout事件（例如单击链接）因此，如果单击了任何子元素，我们需要禁用隐藏菜单

因为focusout事件在任何子元素的click事件之前被调用，所以实现这一点的方法是在隐藏元素之前设置一个小的超时，然后单击任何子元素都应该清除这个超时，这意味着菜单不会被隐藏

---

这是我的

关于鼠标点击的问题，请参见其他答案

但是，对于丢失焦点， FooSox不是要附加的事件，而是<代码> .CopuSuin 。为什么？考虑下面的弹出窗口：

<div class="popup">
  <input type="text" name="t1">
  <input type="text" name="t2">
</div>

（旁注：我发现

.not（…）

解决方案在事件冒泡的bc中不起作用）

---

额外好处：使用小提琴-打开弹出窗口，然后尝试在输入中进行切换。

我也在寻找这个，在这里我找到了解决方案。这可能对未来的读者有用

$('.menu > li').click(function() {
    $(this).children('ul').stop().slideDown('fast',function()
    {
        $(document).one('click',function()
        {
            $('.menu > li').children('ul').stop().slideUp('fast');
        });
    });

});

mouseleave事件与mouseout的不同之处在于它处理事件冒泡的方式。如果在本例中使用mouseout，则当鼠标指针移出内部元素时，将触发处理程序。这通常是不受欢迎的行为。另一方面，mouseleave事件仅在鼠标离开ele时触发其处理程序它是被束缚的，不是后代

在触发mouseup（）事件时，我们可以检查单击是否在div或子体内部，并采取相应的操作

$(document).mouseup(function (e) {
    var divContent= $(".className");
    if(!divContent.is(e.target) && divContent.has(e.target).length === 0) {
        $(".className").hide();
    }
});

---

你使用的是什么html/jQuery？你能链接到一个实时演示吗（也许或者）？复制，我想：@Sergey，很好的发现。投票以“完全复制”结束。我认为e.stopPropagation（）是关键，正如Sergey在链接中提到的那样

正常

不是

显示的属性值。因此请访问[W3C网站][1]查找有效值。[1]：div没有模糊函数，它不起作用。我应该将此函数放在哪里？就放在脚本标记中？应该在加载正文后编写。。编辑了我的答案。@naiquevin他把它放在哪里不重要，因为它被包装在
$（文档）中.ready
call以某种方式将其附加在“body”上而不是“document”上对我来说很有效。我认为document是object.focusin而不是.focusout？？哇！如此违反直觉，但它工作起来既简单又漂亮。做得很好。你能详细说明为什么你认为这会解决OP的问题吗？我得到容器不是一个函数。
<div class="popup">
  <input type="text" name="t1">
  <input type="text" name="t2">
</div>

$(document).ready(function() {
    $('html').focusin(function() {
        $('.popup').hide(); 
    });
    $('.popup').focusin(function(ev) {
        ev.stopPropagation(); 
    });
});

$('.menu > li').click(function() {
    $(this).children('ul').stop().slideDown('fast',function()
    {
        $(document).one('click',function()
        {
            $('.menu > li').children('ul').stop().slideUp('fast');
        });
    });

});

$(document).mouseup(function (e)
{
    var container = $("YOUR CONTAINER SELECTOR");

   if (!container.is(e.target)&& container.has(e.target).length === 0) 
   {
      container.hide();
   }
});

$(document).mouseup(function (e) {
    var divContent= $(".className");
    if(!divContent.is(e.target) && divContent.has(e.target).length === 0) {
        $(".className").hide();
    }
});