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

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

<!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>

Ответы

Ответ 1

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

Пример кода:

$(document).click(function(e){
    if($(e.target).is('#MainCanvas, #MainCanvas *'))return;
    $('#MainCanvas').hide();
});

Ответ 2

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

 $('#divCustomerGroup').focusout(function () {
            alert('yo');
        });

Ответ 3

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

<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>

Ответ 4

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

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

и после этого произойдет размытие:

$('.my_div').blur(function(){ 
   //code ... 
});

Ответ 5

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

Ответ 6

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

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

Ответ 7

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

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

Ответ 8

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