2009-12-31 16 views
8

Mam problem z ukryciem niektórych wyskakujących okien, które są oparte na elementach div. kiedy klikam na boku tych divów, których nie ukrywają. Oto przykładowy kod, co ja robię ..Problem z rozmyciem jquery() na elemencie 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

duplikat http://stackoverflow.com/questions/1259716/how-to-blur-the-div-element –

Odpowiedz

23

Jeśli dobrze pamiętam, tylko A, AREA, przycisk, INPUT, etykieta, SELECT, TEXTAREA tworzyć wydarzenia focus/rozmycia. Jeśli chcesz ukryć wyskakujące okienko, klikając poza nim, musisz na przykład odsłuchać zdarzenia kliknięcia na dokumencie i sprawdzić, czy zdarzenie miało miejsce wewnątrz lub na zewnątrz wyskakującego okienka.

Przykładowy kod:

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

Albo można użyć mouseout, jeśli nie chcesz, aby użytkownicy musieli klikać. Jeśli będą musieli gdzieś kliknąć, równie dobrze możesz zamknąć przycisk w oknie dialogowym i je kliknąć. – tvanfosson

+0

Dzięki Rafael .. Dostałem punkt .. –

+0

@Jehanzebafridi nie zapomnij sprawdzić odpowiedzi, którą akceptujesz jako zaakceptowaną (ikona pod numerem po lewej stronie odpowiedzi) – Moak

0

Najlepszym pomysłem byłoby obsłużyć zdarzenia MouseDown i sprawdź elementu, która wywołała zdarzenie.

1

Zrobiłem to za pomocą następującego kodu

<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

Możesz dodać atrybut tabindex na div tagu:

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

i po tym wydarzeniu rozmycia będą pracować:

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

nie działa -.- –

0

Pożyczyłem wskazówkę od wielu rozwiązań, aby ułatwić sobie pracę. Zasadniczo, gdy coś skupiam, chcę, żeby się pojawiła, ale jeśli kliknę z niego, chcę, żeby znów się ukrył. Tak więc, jeśli kliknę coś na INNYM div, który się pojawił, moje kliknięcie następnie idzie, aby zobaczyć, czy znajdzie rodzica o nazwie "DivHoldingcustomController". Jeśli tak, nie rób nic. Jeśli tak nie jest (ponieważ kliknąłem gdzieś indziej, więc whateve, który kliknąłem, nie ma tego rodzica), a następnie ukryj kontroler niestandardowy.

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

Można użyć mouseleave metody i rozwiązania

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

jQuery ma .focusin() i .focusout() metody wiązania do rozmycia i skupić się na elementach wydarzeń, które nie ogień rodzimych javascript zdarzenia rozmycia. jQuery focusout

3

dla div focusOut blur() zadziała

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

do góry! Prosty i elegancki. –

+0

dzięki bracie ... Yo –