Empêcher le tir le flou de l'événement si l'un de ses enfants reçoit le focus

J'ai un div sur une page qui affiche des informations sur une catégorie particulière (Image, Nom, etc).

Quand je clique sur modifier l'image qu'il met de la catégorie dans le mode d'édition qui me permet de mettre à jour le nom. Comme vous pouvez le voir sur l'image ci-dessous, il montre que la "Soupe" est actuellement en mode edit, les autres sont en mode normal mode. Tout cela fonctionne comme prévu avec les annuler /boutons enregistrer tout bon. (J'ai essayé d'ajouter une image, mais ne me laisse pas, besoin de plus d'amour)

Cependant une fois dans le mode edit, si je clique n'importe où sur la page (en Dehors de la div), le résultat attendu serait que la soupe catégorie pourrait revenir à la mode. Lors d'un événement, de tir, de la sorte, cela devrait aussi me permettre de demander si ils voulaient enregistrer les modifications.

Donc ce que j'ai alors décidé de faire est de créer un flou de l'événement sur les "soupes" div parent. Cela fonctionne comme prévu si je clique n'importe où sur la page, mais si je clique sur l'intérieure de l'élément de la div il provoque aussi des parents flou événement à feu, provoquant la catégorie pour revenir au mode d'affichage.

Alors, est-il un moyen d'empêcher la div parent de tirer le flou de l'événement si l'un de ses enfants de recevoir le focus?

<div tabindex="-1" onblur="alert('outer')">
    <input type="text" value="Soup" />
</div>

Je viens d'écrire du code sans un compilateur, donc pas sûr si cela fonctionne même mais avec qui, nous l'espérons, vous obtenez l'idée.

Je suis en utilisant Knockout.js pour mettre à jour l'interface graphique à la volée, mais qui ne devrait pas l'effet de cette réponse que je n'aurais pas pensé.

question Connexe

OriginalL'auteur Thwaitesy | 2012-08-23

30

J'ai eu à faire face à ce problème avant. Je ne suis pas sûr si c'est la meilleure solution, mais c'est ce que j'ai fini de l'utiliser.

Depuis l'événement de clic se déclenche après le flou, il n'existe pas (cross-browser, fiable) façon de dire quel élément gagne le focus.

Mousedown, cependant, les feux avant de flou. Cela signifie que vous pouvez définir certains drapeau dans le mousedown de vos enfants les éléments, et d'interroger le drapeau dans le flou de votre parent.

De travail exemple: http://jsfiddle.net/L5Cts/

Noter que vous aurez également à gérer keydown (et vérifier tab/maj + tab) si vous voulez attraper, de les flous causés par le clavier.

Monsieur, vous êtes un gentleman et un érudit. J'ai essayé différentes solutions à ce problème dans les différentes situations pendant plus d'un an. N'a jamais réalisé le calendrier de tous les événements, un million de mercis.
J'ai essayé de trouver une sorte de définition officielle de l'événement de commande/de la préséance pour voir si cela peut être invoqué. C'est une vieille question, mais si la réponse est encore vrai cette solution peut fonctionner simplement en raison de la coïncidence: stackoverflow.com/a/282271/2382483. Id aiment à trouver vraiment une solution solide pour cela, mais tout semble être un travail autour de ou hack.
Cet exemple, bien que pour Réagir, peut être adapté à assez bien n'importe quel usage. Il utilise l'accent sur le nouvel élément et le flou sur l'original, et utilise une minuterie pour annuler l'effet de flou de l'événement lors de la discussion des incendies. medium.com/@jessebeach/...

OriginalL'auteur jbabey
2

Je ne pense pas qu'il n'y a aucune garantie mousedown va se passer avant les événements de focus dans tous les navigateurs, donc une meilleure façon de gérer cela pourrait être d'utiliser evt.relatedTarget. Pour le focusin événement, le eventTarget propriété est une référence à l'élément qui est actuellement perdre focus. Vous pouvez vérifier si l'élément est un descendant de la mère, et si elle n'est pas, vous le savez focus entre dans le parent de l'extérieur. Pour le focusout événement, relatedTarget est une référence à l'élément qui est actuellement réception focus. Utiliser la même logique pour déterminer si l'accent est entièrement en laissant le parent:
```
const parent = document.getElementById('parent');

parent.addEventListener('focusin', e => {
    const enteringParent = !parent.contains(e.relatedTarget);

    if (enteringParent) {
        //do things in response to focus on any child of the parent or the parent itself
    }
});

parent.addEventListener('focusout', e => {
    const leavingParent = !parent.contains(e.relatedTarget);

    if (leavingParent) {
        //do things in response to fully leaving the parent element and all of its children
    }
});
```
Doit être accepté de répondre, en raison de l'exhaustivité.

OriginalL'auteur Robby Allsopp

Vous devez vous connecter pour publier un commentaire.