Je suis coincé sur la logique sur la logique pour faire un clavier de menu déroulant accessible.
Le HTML est structuré en tant que tel (noms de classe supplémentaires utilisés pour la clarté): P>
$('li.primaryMenuItem').blur([close $(this).find('ul.popUpMenu'))
7 Réponses :
Utilisez les nouvelles fonctions JQuery 1.4: L'événement de mise au point est envoyé à un
élément quand il ou tout élément à l'intérieur
de cela, perd la mise au point. Ceci est distinct
de l'événement de flou en ce qu'il
Soutient la détection de la perte de mise au point
des éléments parents (en d'autres termes,
Il soutient des événements bouillons).
FOCUSIN et MISEOOUT au lieu de flou et focus . Voici comment Focusout diffère:
@Keltex j'ai regardé ça. Cependant, ce n'est pas ce dont j'ai besoin. Je veux savoir si le conteneur parent a perdu la mise au point. La mise près de la mise près de l'enfant se concentre sur l'un des éléments de l'enfant. Ce qui signifie que la tabulation du sous-menu au sous-menu déclencherait cet événement. J'ai besoin de quelque chose sur les lignes de 'a la personne à onglets à l'extérieur de l'événement de type conteneur'.
Essayez ceci logiquement, si votre utilisateur Île de l'utilisateur, il a dû se concentrer sur la dernière ancre. Vous pouvez même configurer votre propre gestionnaire d'événements comme si : et appelez-le dans le dernier événement de flou d'ancres:
Le problème avec c'est de nombreuses façons de quitter le menu avant de sortir du dernier élément. Par exemple, vous pouvez avoir une tabulation en arrière, ce qui signifie que vous pourriez tabuler du dernier élément, mais toujours dans le même menu. De plus, on pourrait utiliser une commande de clavier ou une souris clic pour floue pendant mi-parcours dans le menu.
Vous pouvez utiliser des bouillons d'événement pour vérifier ce qui se concentre sur l'événement FocusIn. J'ai eu du succès avec le code suivant: vous pouvez (devrait) le rendre probablement plus optimisé, mais cela fonctionne.
Intéressant! Je me sens étrange, cependant, attachant un gestionnaire d'événements au corps et à tous les éléments de l'enfant. Y a-t-il une sorte de problème de performance qui fait cela? En fin de compte, votre solution est à chaque focalisation, voir si elle est dans le menu. Sinon, fermez-le '. Ce qui a certainement un sens.
Eh bien, cela déclenchera l'événement FocusIn à tout moment, un événement de mise au point survient dans le corps, mais la mise au point ne changera pas généralement très rapidement, et il y aura un nombre limité d'éléments pouvant être la cible d'un événement de mise au point (liens / formes Éléments) Donc, personnellement, je ne pense pas que l'appel de cette comparaison sur chaque événement de mise au point aura trop d'impact sur la performance. Vous pouvez essayer d'optimiser la comparaison (je ne suis pas sûr qui est plus rapide $ (E.Target) .is ('ul.popupmenu li a') ou d'exemple), et vous devez mettre en cache la requête d'élément. Si la performance est un problème réel, vous devez exécuter des points de repère pour vérifier l'impact.
FocusIn ne tire pas dans certains navigateurs pour la balise corporelle (ou de nombreux autres étiquettes). La définition du tabindex à -1 semble résoudre et rend cette solution un bon ajustement - $ ("corps"). ATT ("Tabindex", -1);
Cela m'a aidé ... http://plugins.jquerery.com/project/focus
Il détectera si vous êtes toujours au sein du parent automatiquement. Il change essentiellement JQuery FocusOUT pour fonctionner de cette façon, ce que je ressens est de savoir comment cela devrait fonctionner. P>
<div class="parent">
<input type="text" />
<input type="text" />
</div>
$('#parent').focusout(function () {
console.log('focusout of parent');
});
Que diriez-vous si vous procédez comme suit:
$('#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
});
+1 Cela m'a fait aller dans la bonne direction. Je ne vois pas pourquoi le deuxième sélecteur ( #link_a_id> * ) serait nécessaire et je ne l'ai pas utilisé. J'ai aussi dû envelopper l'instruction IF dans un délai d'attente parce que le corps vole l'accent avant que le prochain élément gagne la mise au point.
J'ai eu un problème similaire ... J'ai créé un jsfiddle pour déterminer quand un champ de bord parent perd la mise au point puis appeler une fonction. Il pourrait certainement être optimisé, mais c'est un départ.
Je suis venu avec cette recette (Vanilla JS) qui fait exactement ce que l'OP demande (fournir un moyen d'écouter "se concentrer sur" se déplacer en dehors d'un élément de conteneur ") et est suffisamment générique pour travailler pour tout cas d'utilisation. < P> Dans l'exemple de OP, il serait utilisé comme ceci: voici le code de oncocusoutideof :
Y a-t-il une faute de frappe?
$ ('ul.primarymenuitem A: First'). Focus ([Call Showmenu Function]) ->$ ('Li.PrimaryMenuitem A: Premier'). Focus ... < / code>