Проблема с событием jquery blur() в элементе Div

У меня проблема с сокрытием некоторых всплывающих окон, основанных на div. когда я нажимаю на эти элементы div, они не скрываются. Вот пример кода, что я делаю..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script type="text/javascript" src="../JS/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function()
        {
            $("#MainCanvas div").blur(function()
            {
                alert("blured");
            });
        });
    </script>

</head>
<body>
    <div id="MainCanvas" style="width: 400px; height: 350px; border: solid 1px black;">
       <div class="ui-widget-content" style=" vertical-align:middle; height:60px; border: solid 2px black; width:300px;">
            Drag me around
        </div>
    </div>

</body>
</html>

html jquery onblur
person Jehanzeb afridi    schedule 31.12.2009    source источник

Ответы (8)


arrow_upward
25
arrow_downward

Если я правильно помню, только A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA создают события фокуса/размытия. Если вы хотите скрыть всплывающее окно, щелкнув за его пределами, вы должны, например, прослушать события щелчка в документе и проверить, произошло ли событие внутри или вне всплывающего окна.

Образец кода:

$(document).click(function(e){
    if($(e.target).is('#MainCanvas, #MainCanvas *'))return;
    $('#MainCanvas').hide();
});
person Rafael    schedule 31.12.2009
comment
Или вы можете использовать mouseout, если вы не хотите, чтобы ваши пользователи щелкали мышью. Если им нужно будет щелкнуть где-то, у вас также может быть кнопка закрытия в диалоговом окне, и они должны щелкнуть ее. - person tvanfosson; 31.12.2009
comment
Спасибо, Рафаэль. Я понял.. - person Jehanzeb afridi; 01.01.2010
comment
@Jehanzebafridi не забудьте проверить ответ, который вы принимаете как принятый (значок под номером слева от ответа) - person Moak; 04.03.2013
comment
Хотя это работает, для более комплексного решения, особенно если ваш всплывающий слой содержит несколько вложенных элементов, каждый из которых может получить событие щелчка, проверьте этот ответ: stackoverflow.com/a/4629849/1371408 - person Matty J; 15.08.2014

arrow_upward
5
arrow_downward

для размытия div будет работать focusout()

 $('#divCustomerGroup').focusout(function () {
            alert('yo');
        });
person Jaydeep Shil    schedule 06.10.2015
comment
наверх! Простой и элегантный. - person BOTJr.; 18.06.2016

arrow_upward
4
arrow_downward

Вы можете добавить атрибут tabindex к тегу div:

<div class="my_div" tabindex="3"></div>

и после этого события размытия будет работать:

$('.my_div').blur(function(){ 
   //code ... 
});
person Viktor Oleksyn    schedule 06.03.2013

arrow_upward
1
arrow_downward

Я сделал это, используя следующий код

<script>
    $(document).click(function (e) {
        if ($(e.target).is('._dpcontrol, ._dpcontrol *'))
            return;
        $('._dpcontrol').each(
                function (index, value) {
                    var retrivedtextbox = $(this).find('._dpitem')[0];
                    $(retrivedtextbox).fadeOut();
                });     
    });
</script>
person Hemant Shinde    schedule 25.06.2012

arrow_upward
0
arrow_downward

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

person rahul    schedule 31.12.2009

arrow_upward
0
arrow_downward

Я позаимствовал совет из нескольких решений, чтобы сделать что-то проще. В основном, когда я фокусируюсь на чем-то, я хочу, чтобы оно появилось, но если я нажму на него, я хочу, чтобы оно снова скрылось. Итак, если я нажимаю на что-то ВНУТРИ появившегося div, мой щелчок затем переходит к поиску родителя с именем «DivHoldingcustomController». Если да, то ничего не делайте. Если это не так (потому что я щелкнул где-то еще, поэтому то, что я щелкнул, не имеет этого родителя), скройте пользовательский контроллер.

    $(document).on("click", function (event) {
        var groupSelectorArea = $(event.target).closest(".DivHoldingCustomController").length == 1;
        if (!groupSelectorArea)
            $(".SomethingIWantToHide").hide();
    });
person Lukas    schedule 30.04.2014

arrow_upward
0
arrow_downward

Вы можете использовать mouseleave метод и решение

 <script type="text/javascript">
    $(document).ready(function()
    {
        $("#MainCanvas div").mouseleave(function()
        {
            alert("mouseleave");
        });
    });
</script>
person Yuseferi    schedule 15.10.2014

arrow_upward
0
arrow_downward

jQuery имеет методы .focusin() и .focusout() для привязки к событиям размытия и фокусировки на элементах, которые не запускают собственное событие размытия javascript. фокусировка jQuery

person Matt Fellows    schedule 11.11.2014