Question

我有一个显示DIV的JavaScript（将其显示css属性从'none'设置为'normal'。有没有办法让它集中注意力，以便当我点击页面上的其他位置时，DIV会丢失焦点及其显示属性设置为无（基本上隐藏它）。我正在使用JavaScript和jQuery

Answer 1

单击除selecteddiv

以外的任何页面时隐藏div

$(document).not("#selecteddiv").click(function() {
        $('#selecteddiv').hide();
    });

如果你想隐藏焦点丢失的div或动画模糊，那么

$("#selecteddiv").focusout(function() {
        $('#selecteddiv').hide();
    });

带动画

$("#selecteddiv").focusout(function() {
    $('#selecteddiv').animate({
        display:"none"
    });
});

愿这会帮到你

Answer 2

如果您的网站上有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事件处理程序。只要被认为失去焦点，就会触发。不幸的是，单击一些子元素将触发焦点事件（例如单击链接），因此我们需要在单击任何子元素时禁用隐藏菜单。

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

这是我的working jsfiddle example

Answer 3

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

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

Answer 4

你可以点击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();
    }
  });
});

Answer 5

关于鼠标点击，请参阅其他答案。

然而，对于失去焦点，.focusout不是要附加的事件，而是.focusin。为什么？请考虑以下弹出窗口：

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

从t1移动到t2时会发生什么：

t1发送focusout，其中冒充$('.popup').focusout
t2发送focusin，其中冒充$('.popup').focusin

...所以你得到两种类型的事件，即使焦点完全保留在弹出窗口内。

解决方案类似于使用.click完成的魔术：

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

（旁注：我发现.not(...)解决方案无法正常运行事件冒泡。

奖金：工作小提琴click me - 打开弹出窗口，然后尝试选择输入。

Answer 6

我也在寻找这个，在这里我找到了解决方案https://api.jquery.com/mouseleave/。这对未来的读者可能有用。

mouseleave事件与mouseout处理事件冒泡的方式不同。如果在此示例中使用了mouseout，那么当鼠标指针移出Inner元素时，将触发处理程序。这通常是不受欢迎的行为。另一方面，mouseleave事件只在鼠标离开它所绑定的元素时触发其处理程序，而不是后代。

Answer 7

我个人没有试过模糊div，只在输入等。如果模糊eventhandler工作，它是完美的并使用它。如果没有，你可以检查一下： jQuery animate when <div> loses focus

Answer 8

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

});

Answer 9

在触发mouseup（）事件时，我们可以检查单击是在div还是其后代内部，并采取相应的措施。

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

Answer 10

显示很容易

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

隐藏

How do I hide a div when it loses its focus?

Answer 11

使用jQuery，您可以使用hide()隐藏元素，例如：$("#foo").hide()

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

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

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

11 个答案: