Desde hace algún tiempo he notado que la gente tiene cierta manía a escribir los enlaces HTML utilizando el atributo onClick de la etiqueta Anchor (<A>) en lugar de utilizar el atributo href. No sé de dónde ha salido esa técnica, incorrecta en la mayoría de los casos, que suele producir efectos no deseados. Es lo malo de que muchas aplicaciones Web estén desarrolladas por auténticos incompetentes.
El otro día un amigo me pidió ayuda para revisar un problema que tenía que resolver, y justamente el problema era causado por un mal uso de los enlaces HTML. Lo primero que estaba mal es que el enlace no tenía valor en el href, sino que utilizaba directamente el onClick. Dicho onClick ejecutaba una función Javascript que en lugar de devolver la URL a la que dirigirse, hacía window.location=URL. Me entra urticaria de sólo recordar ese código abominable.
El efecto era que se lanzaban 2 threads al servidor y uno de ellos cortaba la ejecución del otro. Es decir, igual que ocurriría si pongo una URL en el navegador, le doy a enter y mientras está accediendo al servidor Web, pongo otra y le doy a enter. La primera conexión se cancela. Esto puede tener varios efectos no deseados. En general no pasa nada malo, pero a veces, ocurre lo que a mi amigo: el URL malo cancelaba al URL bueno.
La cuestión es que el problema de todo esto surge por una seria ignorancia y absoluta desidia del programador que escribió dicho código en primer lugar. Por ello, y para que no le pase lo mismo a otras personas, aquí pongo un enlace a un blog donde se explica muy bien cómo funciona la etiqueta <A> y sus efectos al usar href y onClick.
A modo de resumen, transcribo la tabla final donde se enumeran los casos posibles.
| <a href=»#»>click</a> | No hace nada, pero desplaza hacia arriba |
| <a href=»javascript:;»>click</a> | No hace nada y no desplaza |
| <a href=»javascript:f()»>click</a> | Ejecuta la funcion f() y sustituye el contenido de la página actual con resultado de esta función (excepto si f() no devuelve nada) |
| <a href=»javascript:void(f())»>click</a> | Ejecuta la funcion f() pero no hace nada más, aunque f() devuelva algun valor. |
| <a href=»javascript:void(a())» onclick=»b()»>click</a> | Ejecuta primero la funcion b() y después a() pero no hace nada más |
| <a href=»javascript:void(a())» onclick=»return c()»>click</a> | Ejecuta primero la funcion c() y, si esta devuelve true entonces ejecuta la función a(). Después no hace nada más |
| <a href=»javascript:a()» onclick=»return c()»>click</a> | Ejecuta primero la funcion c() y, si esta devuelve true entonces ejecuta la función f() y sustituye el contenido de la página actual con resultado de la función. |
Más información aquí.
Mi blog técnico 