0
votes

L'événement onBlur empêche l'événement onClick

J'ai une zone de texte d'entrée avec un événement onfocus et un événement onblur. Sous la zone de texte se trouve un div qui est masqué par avec display: none.

Le div doit être affiché si la zone de texte est focalisée et masquer si floue. Cela semble fonctionner. Maintenant, je veux laisser le div rester visible ou faire des clics sur div si je clique sur div (ou l'un de ses contenus) lui-même. Cela ne marche pas. L'événement onBlur empêche tout événement sur le div. J'ai déjà essayé d'identifier quel nouvel élément a été cliqué mais je ne trouve aucun attribut qui m'aide. relatedTarget est NULL. Pour le moment, la seule solution me semble ajouter un onfocus sur tous les autres nœuds en plus du div et de ses enfants

Avez-vous d'autres idées que celle-ci? Merci de votre aide.

Jens

javascript onblur onfocus

4 commentaires

Veuillez lire Comment demander et un exemple reproductible minimal , puis modifiez votre question en conséquence.

(Je suppose qu'un court délai avant de redéfinir le div pour afficher: aucun, serait probablement utile. Si un clic à l'intérieur du div se produit pendant cette période, vous devrez alors effacer le délai.)

ce que vous pouvez faire est: div on click event, ajouter un nom de classe "active" et sur votre on blur event add if statement check si le div a une classe "active", si aucun display: none, if yes display: block. si tu veux je peux partager du code

@Elnatanvazana Merci pour votre réponse. Je ne peux pas faire ça. Mon onblur empêche le clic de div. Je veux que le div disparaisse si je clique ailleurs mais sur div.

3 Réponses :

0
votes

Quand onblur s'exécute, il masquera le div, donc lorsque le clic sera fait, il ne sera pas déclenché sur div car le div est invisible. donc :

 // use the following global variable
   var mytimer = null;
  
  function newOnBlur()
  {
     mytimer = setTimeout(YourCurrentOnBlurFunctionWihoutParentheses,150);
  }
  
  // clearTimeout in the first line of your click function
  function newOnClick()
  {
     clearTimeout(mytimer);
     //  rest of your click event
  }

0 commentaires

0
votes

Merci à tous pour vos réponses. Je vais prendre la suggestion de nAviDs. Cela semble un peu moche avec la variable globale, mais cela semble la seule façon de le faire.

Pour ceux qui ont le même problème: setTimeout est un peu pédant dans mon cas. J'ai dû le configurer de cette manière ou le délai d'expiration n'est jamais utilisé:

var timer = null;
function timer_function(divname)
{
    timer = setTimeout(function(){document.getElementById(divname).style.display='none'}, 200);
}

J'ai dû me recentrer sur la zone de texte, si le délai d'attente est effacé, sinon la fonction de flou ne fonctionne plus.

Merci pour votre temps et votre aide. :)

0 commentaires

0
votes

onmousedown actif avant onblur

div.addEventListener('mousedown', function(event) {
   event.preventDefault();
   event.stopPropagation();
});

0 commentaires