El botón de clic no se activa después de un campo de entrada de intercambio cuando el usuario hace clic inmediatamente en el botón

Question

Tengo un texto de entrada con un evento onchange que llama a una función en la que aparece un cuadro de alerta. También tengo un botón cuyo onclick llama a una función diferente. Si el usuario realiza un cambio en el texto de entrada e inmediatamente hace clic en el botón, el evento onchange se activa, mostrando el cuadro de alerta, pero el código en la función para el clic en el botón no se ejecuta. He leído que esto tiene algo que ver con el burbujeo del evento, pero no he visto ninguna solución. ¿Hay una solución? ¿Es posible?

Aquí hay un pequeño ejemplo:

<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> 

El controlador de eventos onclick showAlert2() no se dispara si se realiza un cambio al valor de entrada y el usuario hace clic en el botón de inmediato. que quiero, que escriba algo en el campo de entrada, haga clic en el botón inmediatamente y fuegos

alert ("One") y alerta ("DOS") ...

o sólo

alert ("DOS")

Answer 1

por lo que yo puedo decir que no es un problema con burbujeante (que es un problema con onchange pero es una pista falsa en este caso). El problema es que al hacer clic en el botón después de cambiar el valor del campo se activa blur, lo que provoca que showAlert1() se ejecute antes de que se active el botón onclick.

Aquí hay un ejemplo rápido de cómo funciona de la forma descrita pero verás que es un truco no confiable más que nada. Básicamente, almacena temporalmente la ejecución de cada función para que se pueda activar el botón onclick. Sin embargo, se cae si hace clic y mantiene presionado el botón más tiempo que el búfer que se establece dentro de cada función a través de setTimeout().

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

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

Demostración: jsfiddle.net/5rTLq

Answer 2

¿qué tal esto

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

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

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