jQuery averiguando si parent ha perdido 'focus'

Question

Estoy atascado en descifrar la lógica para hacer accesible un teclado de menú desplegable.

El HTML está estructurado como tal (nombres de clase extra que se usa para mayor claridad):

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

Link 1 y Link 2, cuando se cernía, mostrará las listas de sub-menú (menú desplegable). Tengo esto funcionando bien con algunos jQuery y el jQuery hoverIntent plugin.

El problema es que esto solo funciona con el mouse en este momento.

El siguiente reto es hacer que esto funcione a través del teclado.

puedo añadir fácilmente un evento de foco a los enlaces de nivel superior, que luego desencadenan los menús secundarios:

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

que funciona bien.

Para cerrar el menú, una opción es, al abrir otro menú, verificar si ya hay otro abierto y, de ser así, cerrarlo.

Eso también funciona bien.

Donde eso falla, sin embargo, es si tiene el último menú abierto, y la tabulación fuera de él. Como no has tabulado en otro menú, este permanece abierto.

El desafío es descubrir cómo/cuándo cerrar el menú y la lógica necesaria (jQuery) para resolverlo. Idealmente, cerraría el menú cuando el foco esté en un elemento de la página OTROS que cualquiera de los elementos secundarios del menú.

Lógicamente, estoy buscando para ello:

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

Sin embargo, no se puede hacer eso, ya que el LI no tiene realmente el foco, sino más bien la etiqueta de anclaje dentro de ella.

¿Alguna sugerencia?

ACTUALIZACIÓN:

tal vez una manera mejor/más fácil de hacer la pregunta:

Via jQuery, ¿hay una forma de 'reloj' para ver si el foco se ha movido fuera de todos los hijos de un objeto particular ?

Answer 1

Utilice las nuevas funciones de jquery 1.4: focusin y focusout en lugar de blur y focus. Así es como focusout difiere:

El evento focusOut se envía a un elemento cuando ésta, o cualquier elemento dentro de de ella, pierde el foco. Esto es distinto del evento de desenfoque en el que admite la detección de la pérdida de foco desde elementos principales (en otras palabras, admite el burbujeo de eventos).

Answer 2

probar este

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

Lógicamente, si las pestañas de usuario que él debe haber estado centrando la última ancla.

Incluso se puede configurar su propio controlador de eventos, así:

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

y lo llaman en los últimos anclajes caso desenfoque:

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

Answer 3

Puede utilizar la propagación de eventos para comprobar lo que tiene el foco en el evento focusin. Yo tenía éxito con el siguiente código:

$("li:has(ul.popUpMenu)").focusin(function(e) { 
    $(this).children().fadeIn('slow'); 
    }); 
    $('body').focusin(function(e) { 
    if (!$(e.target).parent().is('ul.popUpMenu li')) { 
     $('ul.popUpMenu').fadeOut('slow'); 
    } 
    }); 

Se podría (debería) probablemente que sea más optimizado, pero funciona.

Answer 4

Esto me ayudó ... http://plugins.jquery.com/project/focus

Se detectará si usted todavía está dentro de la matriz de forma automática. Básicamente, el enfoque de jQuery cambia para funcionar de esta manera, lo que creo es cómo debería funcionar.

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

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

no veo por qué pestaña apremiante para mover el campo de texto entre los elementos secundarios deben dar lugar a focusOut en la matriz porque estás todavía dentro de ese padre. Algo debe estar pasando que te saca por un momento y sospecho que es un error ... ¿alguien conmigo en esto? Bueno, de todos modos, el complemento anterior lo arregla. Simplemente inclúyelo antes de tu código para 'arreglarlo'. Me encantaría que alguien explicara por qué esto no es un error si no lo es.

Gracias, Dom

Answer 5

¿Qué tal si lo hace lo siguiente:

$('#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

tuve un problema similar ... He creado un jsFiddle para determinar cuando un grupo de campos padre pierde el foco y luego llamar a una función. Sin duda podría ser optimizado, pero es un comienzo.

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'); 
    } 
});