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

Question

我有一個顯示DIV的JavaScript（將其顯示css屬性從'none'設置為'normal'。有沒有辦法讓它集中注意力，以便當我點擊頁面上的其他地方時，DIV失去焦點，它display屬性設置為none（基本上隱藏它）。我正在使用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事件，實現此目的的方法是在隱藏元素之前設置一個小超時，然后單擊任何子元素應清除此超時，這意味着菜單不會隱。

這是我工作的jsfiddle示例

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

關於鼠標點擊，請參閱其他答案。

然而，對於失去焦點， .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(...)解決方案無法正常運行事件冒泡）。

獎金：工作小提琴點擊我 - 打開彈出窗口，然后嘗試通過輸入選項卡。

Answer 5

你可以點擊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 6

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

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

Answer 7

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

});

Answer 8

在觸發mouseup（）事件時，我們可以檢查click是在div或者后代內部並相應地采取行動。

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

Answer 9

我個人沒有嘗試模糊div，只在輸入等。如果模糊eventhandler工作，它是完美的並使用它。 如果沒有，你可以檢查一下： 當<div>失去焦點時jQuery動畫

Answer 10

顯示很容易

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

為了隱藏

當它失去焦點時如何隱藏div？

Answer 11

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

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

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