web-dev-qa-db-fra.com

Comment empêcher la course entre le clic et le flou?

mon Angular ressemble à ceci>

<input type='text' (blur)='saveData()'>
<button (click)='navigateToPage2()'>

En passant de la zone de texte en cours de focus au bouton , cliquez , il y a - course condition entre deux épreuves.

Le problème est le clic sur le bouton est ignoré car l'événement flou se déclenche en premier et amène le spinner à l'écran pendant qu'il appelle le serveur pour enregistrer les données.

Comment résoudre ce problème exact?

Existe-t-il un hack pour faire en sorte que le clic se déclenche avant le flou?

javascripthtmlangular
19
Nick Thakkar

Au lieu d'un tel piratage pour tirer, cliquez avant l'événement de flou, essayez la solution suivante:

Pour mieux comprendre cela, vous devez connaître cet ordre dans lequel un événement spécifique se déclenche:

  1. souris vers le bas
  2. brouiller
  3. souris vers le haut
  4. cliquez sur

Vous pouvez utiliser cette commande pour travailler en votre faveur dans ce cas.

Essayez d'utiliser l'événement Mousedown à la place et cela se déclenchera avant l'événement flou.

Essayez également d'exécuter cet extrait de code. Cela vous aidera à comprendre l'ordre ci-dessus

    Type first in text box below and then click button <br/>
    <input type='text' onblur="console.log('blur');" />

    <button onclick="console.log('click')" 
      onmouseup="console.log('mouseup')" 
      onmousedown="console.log('mousedown')" > Type first and then this click button</button>
30
Nick Thakkar

Selon cet exemple, vous pouvez également utiliser e.preventDefault sur l'événement mouseDown: https://codepen.io/mudassir0909/pen/eIHqB (il a utilisé jquery mais cela devrait être le même avec une autre lib)

1
Sylvain DNS

Le mieux que vous puissiez faire si vous souhaitez gérer un événement de clic, est d'attendre un moment avant d'envoyer la demande et de vérifier si un avertissement s'est produit sur votre bouton. Voir Comment savoir sur quel élément j'ai cliqué pour déclencher un gestionnaire d'événements flou?

var isClick = false;


document.querySelector('input').addEventListener('blur', (e) => {
    if (isClick) {
      console.log('blur caused by click on button');
    } else {
      console.log('blur not by click');
    }
});

document.querySelector('button').addEventListener('mousedown', () => {
  isClick = true;
  console.log('mouse down on button, ignore blur on input');
  setTimeout(() => {
    isClick = false
  }, 100);
});

document.querySelector('button').addEventListener('click', () => {
    console.log('Processing click');
});
<input type='text'>
<button>
0
Juan Mendes

Si vous écoutez sur (blur)="onBlur()", Enveloppez le contenu de onBlur() dans un setTimout avec une durée 100 Ms ou plus.

0
Samer s Salib