2010-08-13 10 views
9

He estado investigando el orden de incendios de eventos entre los navegadores, porque nuestra aplicación está experimentando un comportamiento inusual.Orden de cambio/pulsación de teclas/eventos de pulsación de teclas en jQuery

He creado una pequeña prueba para ver el orden de los tres eventos: cambio, selección de teclas y pulsación de teclas.

Aquí es el HTML (test.html):

<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 
     <script src="test.js"></script> 
    </head> 
    <body> 

     <input type="text" id="TextBox" /> 
     <input type="button" id="Button" value="Clear Results"/> 

     <hr /> 

     <table id="ResultTable" style="width: 100px"> 
      <tr><th>Results</th></tr> 
     </table> 
    </body> 

</html> 

Aquí está la JS (Test.js):

/* 
    Appends event information to display table. 
*/ 

$(document).ready(function() { 
    $("#TextBox").change(function() { 
     $("<tr><td>Change</td></tr>").appendTo("#ResultTable"); 
    }); 

    $("#TextBox").keydown(function() { 
     $("<tr><td>Key down</td></tr>").appendTo("#ResultTable"); 
    }); 

    $("#TextBox").keypress(function() { 
     $("<tr><td>Key press</td></tr>").appendTo("#ResultTable"); 
    }); 

    $("#Button").click(function() { 
     $("#ResultTable").empty(); 
     $("<tr><th>Results</th></tr>").appendTo("#ResultTable"); 
    }); 
}); 

Cuando escribo letra f en el cuadro de texto, a continuación, presione intro , me sale el siguiente en Internet Explorer 8:

Resultados

  • Clave abajo
  • oprima la tecla
  • Cambio
  • Clave abajo
  • oprima la tecla

Pero en Firefox (3.6.8), me sale el siguiente:

Resultados

  • Clave
  • Clave de prensa
  • Clave abajo
  • oprima la tecla
  • Cambio

El fin del evento de cambio es significativo ya que estamos capturando la tecla enter en el evento KeyDown, pero haciendo un poco de validación con el evento de cambio

He echado un vistazo, pero no he podido identificar dónde está el problema.
¿Este comportamiento es esperado? ¿Deberían todos los navegadores activar eventos jQuery en un orden específico? ¿O deberíamos eliminar todas las suposiciones para la activación del orden de evento? ¿O hay algo más que se está poniendo en el camino en el que no estoy pensando?

+1

me sorprende que este no tiene respuestas aún como yo hubiera pensado como un comportamiento interesante ES DECIR. Quizás IE tiene demasiado comportamiento interesante. – Russell

+1

Puedo confirmar que IE9 se comporta de la misma manera que IE8 en este sentido. – nickf

Respuesta

3

No pude encontrar nada en detalle en la red sobre este escenario específico, aparte de que el orden de evento no es algo que deba asumirse en la implementación de navegadores.

Esto me lleva a eliminar la suposición de que el método de cambio siempre vendrá después de onkeydown, y tendrá que diseñar mi proceso de validación/envío con esta consideración.

Básicamente moveré la validación/envío a un método, y lo llamaré desde ambos eventos, pero asegúrese de que solo se llame una vez, usando un indicador.

Si alguien tiene alguna información/consejo adicional sobre esto, sería genial.:)

+1

El uso de la función 'one' de jquery debería permitirle disparar sin tener que usar una bandera, ya que el evento solo se desencadena una vez. –

1

sé que la pregunta es viejo, pero terminó haciendo esto en una situación similar a la OP:

$("#my_form").one("change keypress", ":input", ask_user_to_save_before_leaving); 
Cuestiones relacionadas