Le bouton onclick ne se déclenche pas après le champ de saisie onchange lorsque l'utilisateur clique immédiatement sur le bouton

Question

J'ai un texte d'entrée avec un événement onchange qui appelle une fonction dans laquelle une boîte d'alerte s'affiche. J'ai aussi un bouton dont onclick appelle une fonction différente. Si l'utilisateur modifie le texte d'entrée et clique immédiatement sur le bouton, l'événement onchange se déclenche, affichant la boîte d'alerte, mais le code de la fonction pour le onclick du bouton ne s'exécute pas. J'ai lu que cela a quelque chose à voir avec le fait de bouillonner l'événement, mais je n'ai pas vu de solutions. Y a-t-il une solution? Est-ce même possible?

Voici un petit exemple:

<input type = "text" onchange = "showAlert1()"> 
<input type = "button" id = "al2" value = "Click Here" onclick = "showAlert2()"> 

<script type = "text/javascript"> 

function showAlert1() 
{ 
    alert("ONE") 
} 

function showAlert2() 
{ 
    alert ("TWO"); 
} 

</script> 

Le gestionnaire d'événements onclick showAlert2() ne se déclenche pas si une modification est apportée à la valeur d'entrée et l'utilisateur clique sur le bouton immédiatement. Je veux que vous écrivez quelque chose sur le champ d'entrée, cliquez immédiatement sur le bouton et les feux

alerte (« ONE ») et d'alerte (« DEUX ») ...

OU SEULEMENT

alerte (« deux »)

Answer 1

Pour autant que je peux dire que ce n'est pas un problème avec bouillonnement (ce qui est un problème, mais onchange est un hareng rouge dans ce cas). Le problème est que cliquer sur le bouton après avoir modifié la valeur du champ déclenche blur, provoquant l'exécution de showAlert1() avant que le bouton onclick ne soit déclenché.

Voici un exemple rapide de la façon dont vous l'avez décrit, mais vous verrez que c'est un hack peu fiable plus que tout. Fondamentalement, il tamponne l'exécution de chaque fonction afin que le bouton onclick puisse être déclenché. Cependant, il tombe si vous cliquez et maintenez le bouton plus longtemps que le tampon qui est défini dans chaque fonction via setTimeout().

function showAlert1() { 
    setTimeout(function(){ alert("ONE") }, 250); 
} 

function showAlert2() { 
    setTimeout(function(){ alert("TWO") }, 250); 
} 

Démo: jsfiddle.net/5rTLq

Answer 2

que diriez-vous

function showAlert1(a) { 
    alert(a.value); /* use setTimeout to delay */ 
} 

function showAlert2() { 
    alert(document.getElementById('txt').value); 
} 

test: http://jsfiddle.net/C3jRr/2/