2009-12-31 1 views
8

У меня проблема, скрывающая определенное всплывающее окно, основанное на div. когда я нажимаю на сторону те divs, которые они не скрывают. Вот пример кода, что я делаю ..Проблема с событием jquery blur() на элементе 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> 
+1

дубликата http://stackoverflow.com/questions/1259716/how-to-blur-the-div-element –

ответ

23

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

Пример кода:

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

Или вы могли бы использовать mouseout, если вы не хотите, чтобы ваши пользователи должны были щелкнуть. Если им нужно щелкнуть где-нибудь, вы можете также иметь кнопку закрытия в диалоговом окне и нажать на нее. – tvanfosson

+0

Спасибо rafael .. Я получил смысл .. –

+0

@Jehanzebafridi не забудьте проверить ответ, который вы принимаете в качестве принятого (значок под номером слева от ответа) – Moak

0

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

1

Я сделал это с помощью следующего кода

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

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

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

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

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

не работает -.- –

0

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

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

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

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

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

3

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

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

наверху! Простой и элегантный. –

+0

спасибо, брату ... Yo –

 Смежные вопросы

  • Нет связанных вопросов^_^