Uninstallme

Una de las recomendaciones de las WCAG, es la de usar en los scripts manejadores de eventos lógicos en vez de dependientes del dispositivo, o en caso de que no sea posible, proporcionar mecanismos redundantes (dos eventos para la misma función). Así propone usar onkeydown cuando se use onmousedown u onkeypress cuando se use onclick.
http://www.w3.org/TR/WCAG10-HTML-TECHS/#directly-accessible-scripts

Perfecto. El problema está en la consideracion de onclick como un evento dependiente del dispositivo, ya que, a pesar de su nombre, todos los navegadores modernos activan el comportamiento previsto para el elemento asociado al “onclick” al presionar la tecla Enter cuando dicho elemento tiene el foco. Onclick sería más preciso si hubiera sido llamado algo como “onactivate” Jeremy Keith en DOM Scripting.

El evento onkeypress se dispara con la pulsación de una tecla que, en algunos navegadores como Firefox, incluye la tecla tabulador. Esto supone que si llegamos a un enlace con un evento onkeypress definido y estamos usando el tabulador para navegar, no podremos saltar ese enlace ya que le habremos robado a la tecla tabulador su función original al asignarle la activación de una función javascript.

En esta página se puede ver un ejemplo de uso de onkeypress y sólo onclick. Para un usuario sin ratón navegando con Firefox, el primer enlace “Mostrar algo” supone el fin.

Citando nuevamente a Jeremy Keith, el uso de onkeypress puede causar más daño que beneficio, así que todo lo que necesitamos es onclick para proporcionar control mediante el teclado.

Ahorrar líneas de código

En caso de que tengamos que duplicar la función asociada a un elemento para un segundo evento, siempre será mejor asignar a ese segundo evento el primero que hayamos definido, que duplicar todas las líneas.

En vez de hacer esto:


elemento.onclick = function(){
	// instrucciones;
}
elemento.onkeypress = function(){
	// vuelvo a copiar las instrucciones;
}

Podemos hacerlo en una línea así:


elemento.onclick = function(){
	// instrucciones;
}
elemento.onkeypress = elemento.onclick;

5 comentarios a “Onkeypress: mejor evitarlo”

culoman, el Julio 30th, 2008:

Mmmm.. Desde Firefox 3, con el tabulador, paso por todos los enlaces varias veces

admin, el Julio 30th, 2008:

Culoman…
Acabo de hacer la prueba en Firefox 3 en la página del test (http://uninstallme.com/ejemplos/onclick-vs-onkeypress/) y no pasa del primer enlace “mostrar algo” con el tabulador. De todas formas creo que el comportamiento de Firefox es el correcto y no un fallo.

Alejandro, el Septiembre 13th, 2008:

Excelente artículo.

Pero eso si, si solo usamos onclick en validadores como Hera seguimos obteniendo errores…

Daniel, el Octubre 9th, 2008:

Hola. Tengo una caja de texto y un botón, la caja de texto tiene un manejador par el onkeypress. Cuando presiono el Enter en la caja de texto, se dispara el manejador del evento click del botón. No entiendo porque ocurre esto, si el botón no tiene el foco. Saludos y gracias

admin, el Octubre 13th, 2008:

Daniel, puedes echarle un vistazo a esto: Prevent Early Form Submission by Hijacking the Enter Key

Deja tu comentario

Los campos marcados con (*) son obligatorios