Javascript y los enlaces

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

2 comentarios to “Javascript y los enlaces”

  1. Gaston Says:

    Que buen blog amigo, lastima que no postees mas, me gusta tu forma de escribir y los temas sobre los cuales hablas.

    Un saludo, Gaston

  2. martywise91241 Says:

    […] The greatest of these is “Sola Scriptura.” Good thoughts on good that came from the Reformation. “Luther and the Reformers didnu2019t get everythi Click https://twitter.com/moooker1

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s


A %d blogueros les gusta esto: