當它失去焦點時隱藏DIV /模糊

Question

我有一個顯示DIV的JavaScript（將它的display css屬性從'none'設置爲'normal'。是否有辦法讓它聚焦以及當我點擊頁面上的其他地方，該DIV失去焦點的顯示屬性設置爲none（基本上躲在它）我使用JavaScript和jQuery

Answer 1

對於隱藏點擊頁面上的任何地方時，除了selecteddiv

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

，如果你想隱藏與失去重心的股利或與動畫模糊，然後又

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

動畫

股利

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

這可以幫到你

Answer 2

使用jQuery你可以隱藏要素與hide()，例如：。$("#foo").hide()

隱藏事件偵聽器中的元素：

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

Answer 3

我個人還沒有嘗試模糊的div，只在輸入等。如果模糊eventhandler的作品，它是完美的，並使用它。如果沒有，你可以看看這個： jQuery animate when <div> loses focus

Answer 4

顯示很容易

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

隱藏

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

Answer 5

可以在身體檢查的點擊綁定功能如果它的當前div使用e.target（e是事件）

$(document).ready(function() { 
    $("body").click(function(e) {  
    if($(e.target).attr('id') === "div-id") { 
     $("#div-id").show(); 
    } 
    else { 
     $("#div-id").hide(); 
    } 
    }); 
}); 

Answer 6

如果您的網站上有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事件，所以實現此目的的方法是在隱藏元素之前設置一個小超時，然後點擊任何子元素應該清除此超時，這意味着菜單不會隱藏。

這裏是我的working jsfiddle example

Answer 7

關於鼠標點擊，看到其他的答案。

但是關於失去焦點，.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(...)解決方案沒有工作BC事件冒泡的）。

獎金：工作小提琴click me - 打開彈出窗口，然後嘗試通過輸入標籤。

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

我也在尋找這個，在這裏我找到了解決方案https://api.jquery.com/mouseleave/。這可能對未來的讀者有用。

mouseleave事件與mouseout處理事件冒泡的方式不同。如果在此示例中使用了mouseout，那麼當鼠標指針移出Inner元素時，處理程序將被觸發。這通常是不受歡迎的行爲。另一方面，mouseleave事件只在鼠標離開綁定元素時觸發其處理程序，而不是後代。

Answer 10

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

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