Скрыть DIV, когда он теряет фокус/размытие

Ответ 1

Для скрытия div при нажатии любого места на странице, кроме выбранного id

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

если вы хотите скрыть div с потерянным фокусом или размытием с анимацией, а затем

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

с анимацией

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

Пусть это поможет вам

Ответ 2

Приведенные примеры, к сожалению, не работают, если на вашем сайте есть iframe, а затем щелкните внутри iframe. Прикрепление события к документу будет прикрепляться только к тому же документу, в котором находится ваш элемент.

Вы также можете прикрепить его к любым iframe, которые вы используете, но большинство браузеров не позволят вам сделать это, если iframe загрузил контент из другого домена.

Лучший способ сделать это - скопировать то, что было сделано в jQuery пользовательском плагине пользовательского интерфейса.

Основной пример 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 для любых детей, способ достижения этого - установить небольшой тайм-аут, прежде чем скрывать элемент, а затем щелкнуть по любому дочернему элементу, чтобы очистить этот тайм-аут, то есть меню Не скрывайтесь.

Вот мой рабочий пример jsfiddle

Ответ 3

Вы можете связать функцию по щелчку тела и проверить, является ли ее текущий 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();
    }
  });
});

Ответ 4

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

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

Ответ 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(...) не работает bc. пузырька события).

Бонус: рабочая скрипка нажмите меня - откройте всплывающее окно, затем попробуйте выполнить табуляцию через входы.

Ответ 6

Я тоже искал это, и здесь нашел решение https://api.jquery.com/mouseleave/. Это может быть полезно для будущих читателей.

Событие mouseleave отличается от mouseout тем, как он обрабатывает пузырьки событий. Если мышь использовалась в этом примере, тогда, когда указатель мыши перемещается из внутреннего элемента, обработчик будет запущен. Обычно это нежелательное поведение. С другой стороны, событие mouseleave запускает только его обработчик, когда мышь покидает элемент, к которому он привязан, а не потомок.

Ответ 7

Я лично не пробовал размытие на divs, только на входы и т.д. Если blur eventhandler работает, он идеально подходит и использует его. Если это не так, вы можете проверить это: jQuery анимировать, когда <div> теряет фокус

Ответ 8

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

});

Ответ 9

Показать легко

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

Для скрытия

Как скрыть div, когда он теряет фокус?

Ответ 10

С помощью jQuery вы можете скрыть элементы с помощью hide(), ex: $("#foo").hide()

Скрыть элемент в прослушивателе событий:

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