jQuery herauszufinden, ob das Elternteil "Fokus" verloren hat

Question

Ich bin auf der Suche nach der Logik, um eine Dropdown-Menü-Tastatur zugänglich zu machen.

Die HTML wird als solche (extra Klassennamen für Klarheit verwendet) strukturiert:

<ul> 
    <li class="primaryMenuItem"> 
     <a href="">Link 1</a> 
     <ul class="popUpMenu"> 
      <li><a href="">Sub Link 1</a></li> 
      <li><a href="">Sub Link 2</a></li> 
     </ul> 
    </li> 
    <li class="primaryMenuItem"> 
     <a href="">Link 2</a> 
     <ul class="popUpMenu"> 
      <li><a href="">Sub Link 1</a></li> 
      <li><a href="">Sub Link 2</a></li> 
     </ul> 
    </li>  
</ul> 

Verbindung 1 und Link 2, wenn schwebte, wird das Untermenü Listen zeigen (Pull-Down-Menü). Ich habe das funktioniert gut mit einigen jQuery und dem jQuery HoverIntent-Plugin.

Der Haken ist, dass dies zur Zeit nur mit der Maus funktioniert.

Die nächste Herausforderung besteht darin, dies über die Tastatur zu erledigen.

Ich kann leicht ein Fokus-Ereignis auf die Top-Level-Links hinzufügen, die dann die sekundären Menüs auslösen:

$('ul.primaryMenuItem a:first').focus([call showMenu function]) 

Das funktioniert gut.

Um das Menü zu schließen, müssen Sie beim Öffnen eines anderen Menüs prüfen, ob bereits ein anderes geöffnet ist, und falls ja, schließen Sie es.

Das funktioniert auch gut.

Wo das jedoch fehlschlägt, ist, wenn Sie das letzte Menü geöffnet haben, und Tab daraus. Da Sie nicht in ein anderes Menü getippt haben, bleibt dieses geöffnet.

Die Herausforderung besteht darin herauszufinden, wie/wann das Menü zu schließen ist und welche Logik (jQuery) benötigt wird, um es herauszufinden. Im Idealfall würde ich das Menü schließen, wenn der Fokus auf einem Element auf der Seite ANDERER als die untergeordneten Elemente des Menüs liegt.

Logisch, ich bin für diese Suche:

$('li.primaryMenuItem').blur([close $(this).find('ul.popUpMenu')) 

Allerdings können Sie das nicht tun, da die LI eigentlich nicht im Fokus hat, sondern den Anker-Tag in sie.

Irgendwelche Vorschläge?

UPDATE:

vielleicht ein besserer/einfacherer Weg, um die Frage zu stellen:

Via jQuery, ist es eine Möglichkeit, zu ‚Uhr‘, um zu sehen, wenn der Fokus außerhalb aller Kinder eines bestimmten Objekts bewegt hat ?

Answer 1

Verwenden Sie die neuen jquery 1.4-Funktionen: focusin und focusout anstelle von blur und focus. Hier ist, wie focusout unterscheidet:

Das focusout Ereignis an ein Element gesendet wird, wenn es oder jedes Element innerhalb davon, den Fokus verliert. Dies ist unterscheidbar aus dem Blur-Ereignis, dass es unterstützt Erkennung der Verlust des Fokus von übergeordneten Elementen (mit anderen Worten, unterstützt Ereignisse sprudeln).

Answer 2

diesen Logischer

$('li.primaryMenuItem:last li a:last').blur([do whatever you need to do]) 

Versuchen Sie, wenn Sie Ihren Benutzer Tabs heraus, dass er den letzten Anker konzentriert worden sein.

Sie sogar Ihre eigenen Event-Handler wie so eingerichtet könnte:

$('li.primaryMenuItem:last').bind('myblur', function() ...); 

und es innerhalb der letzten Anker Unschärfe Ereignis nennen:

...blur(function() { 
    $(this).parents('li.primaryMenuItem').trigger('myblur'); ... 

Answer 3

Sie können Ereignis zu überprüfen, sprudeln, was den Fokus hat auf das fokussierende Ereignis. Ich hatte Erfolg mit dem folgenden Code:

Sie könnten (sollte) wahrscheinlich machen es mehr optimiert, aber es funktioniert.

Answer 4

Das bin ich ... http://plugins.jquery.com/project/focus

half

Es erkennt, ob Sie automatisch noch im Elternteil sind. Grundsätzlich ändert sich jQuery focusout so, dass es auf diese Weise funktioniert, was meiner Meinung nach so ist, wie es funktionieren sollte.

<div class="parent"> 
    <input type="text" /> 
    <input type="text" /> 
</div> 

$('#parent').focusout(function() { 
    console.log('focusout of parent'); 
}); 

Ich sehe nicht, warum das Drücken der Tabulatortaste zwischen Textfeld der untergeordneten Elementen zu bewegen, sollte auf den Eltern auslösen focusout, weil Sie noch innerhalb dieses Elternteil sind. Irgendetwas muss passieren, dass dich für einen Moment raus bringt und ich vermute es ist ein Käfer ... irgendjemand mit mir dabei? Nun, das obige Plugin behebt das Problem. Fügen Sie es einfach vor Ihrem Code ein, um das Problem zu beheben. Würde jemanden lieben zu erklären, warum dies kein Fehler ist, wenn es nicht ist.

Danke, Dom

Answer 5

Wie wäre es, wenn Sie wie folgt vorgehen:

$('#link_A_id, #link_A_id > *').focusout(function() { 
    if ($(document.activeElement).closest('#link_A_id').length == 0) 
     //focus is out of link A and it's children 
}); 

Answer 6

ich ein ähnliches Problem hatte ... Ich habe eine jsfiddle erstellt, um zu bestimmen, wenn ein Elternteil Fieldset den Fokus verliert und dann ein Aufruf Funktion. Es könnte sicherlich optimiert werden, aber es ist ein Anfang.

http://jsfiddle.net/EKhLc/10/

function saveFields() { 
    $.each($('fieldset.save'),function(index, value) { 
    // WHERE THE POST WOULD GO 
    alert('saving fieldset with id '+ value.id); 
    $(value).removeClass('save'); 
    }); 

} 
$('.control-group').focusin(function(){ 
    var thefield = $(this).parent('fieldset'); 
    if (!thefield.hasClass('active')) { 
    if($('fieldset.active').length > 0){ 

     $('fieldset.active').removeClass('active').addClass('save'); 
     saveFields(); 
     } 
    thefield.addClass('active'); 
    } else { 
     console.log('already active'); 
    } 
});