Comment dois-je le feu Javascript flou de l'événement après cliquez sur l'événement qui provoque l'effet de flou?
J'ai rencontré ce problème plusieurs fois et je ne suis pas heureux avec les solutions que j'ai utilisé avant.
J'ai une zone de saisie avec un flou événement qui valide le contenu de celui-ci et un bouton qui va remplir la zone de saisie sur cliquez sur. Le problème, c'est en cliquant sur le bouton déclenche l'entrée flou de l'événement, puis cliquez sur le bouton de l'événement ainsi le contenu inséré par le bouton n'est pas ce qui est validé.
Voir http://jsfiddle.net/jakecr/dL3K3/
Je sais que c'est le comportement correct mais je ne peux pas penser à un moyen propre à contourner le problème.
- Votre question n'est pas claire? quel est votre problème et de la solution attendue?
- Fondamentalement, une action de l'utilisateur à l'origine de deux événements d'un incendie dans l'ordre, mais l'action de la deuxième premier s'appuie sur celle de la première. J'ai envisagé d'utiliser setTimeout pour retarder le premier événement, mais qui ne semble pas être une solution idéale.
- J'ai posé cette question tout à fait une forme générale parce que j'ai rencontré ce problème quelques fois dans des circonstances différentes.
- Peu importe ce que vous faites, si le changement de focus d'un élément à un autre, le premier élément de la
blur
événement sera déclenché avant la secondefocus
ouclick
. Peut-être vous devriez être en utilisant lachange
événement? Alors qu'il pourrait l'évaluer avant du boutonclick
, puis de nouveau après? (non testé)
Vous devez vous connecter pour publier un commentaire.
Nous avons eu un problème similaire au travail. ce que nous avons compris à la fin
était que l'événement mousedown le feu devant le flou de l'événement
vous permettant de définir le contenu avant la validation ou même d'annuler la validation
le processus complètement à l'aide d'un drapeau.
vérifier ce violon que j'ai faite à l'aide de votre exemple-
http://jsfiddle.net/dL3K3/31/
-Edit-
Comme @mclin Suggéré, à l'aide de l'événement mousedown et preventDefault permettra d'éviter le flou de comportement.
Et vous pouvez simplement laisser l'original cliquez sur l'événement intact -
http://jsfiddle.net/dL3K3/364/
Cette solution pourrait être un peu plus propre et meilleure pour la plupart des cas, il suffit de noter que si vous l'utilisez, vous aurez preventDefault et le flou de tout autre élément, l'accent est mis actuellement sur, mais pour la plupart des cas d'utilisation qui ne devrait pas être un problème.
J'ai une meilleure solution que Yoni Jah:
appel preventDefault sur le bouton de l'événement mousedown. Le onBlur n'arrive jamais, vous êtes donc libre de faire tout ce que l'événement click.
C'est mieux parce que cela ne change pas le comportement du clic par faire avancer les choses sur la souris au lieu de la souris vers le haut, qui peuvent être inattendus.
Cela pourrait aussi aider:
Définir une horloge qui retarde le flou action d'événement avant qu'il ne déclenche l'événement click du bouton.
Séparer la validation de l'entrée logique, la fonction qui est appelée à la fois par le flou de l'événement automatiquement, puis par l'événement click après que vous avez modifié la valeur dans la zone de saisie. Vrai votre logique de validation serait appelé deux fois, mais je ne vois pas un chemin sans faire beaucoup plus de changements.
Exemple à l'aide de jQuery:
Il est parfois utile d'avoir un enfant de l'objet sur mouseup, mais le parent veut cacher ses enfants sur le flou. Nous pouvons annuler le masquage des enfants des éléments, puis attendre jusqu'à ce que notre mouseup se produit, alors la force de flou se produire lorsque nous sommes prêts
js
html
css
https://jsfiddle.net/tic84/on421rxg/
Cliquant sur les éléments de la liste ne alerte sur mouseup, malgré le parent d'essayer de les cacher sur le flou
L'astuce est de ne pas utiliser le flou et cliquez sur événements, parce qu'ils sont toujours effectuées dans l'ordre de flou tout d'abord, cliquez sur le deuxième. Au lieu de cela, vous devriez vérifier si l'élément ayant le focus a changé, parce que cela arrive seulement après le clic.
Je pense avoir une solution élégante pour celui-ci:
Ces jours-tous les navigateurs modernes document de soutien.activeElement.
true
etfalse
plutôt que des chaînes carBoolean('false') === true