El atributo HREF vacío

Todos estamos familiarizados con la estructura de un vínculo:

<a href="direccion_destino">CLICK</a>

Pero hay muchas ocasiones en las que debemos utilizar los vínculos para "ejecutar" alguna instrucción y no para dirigirnos a una página. En estos casos, lo que utilizamos son los llamados "eventos" de JavaScript para llamar a una función. Por ejemplo:

<a href="???" onclick="funcion;">CLICK</a>
<a href="???" onmouseover="funcion;">ALGO</a>
<a href="???" onmouseout="funcion;">ALGO</a>

Es entonces que nos encontramos con un dilema ¿qué dato colocar en el atributo href?

Por lo general, los ejemplos que encontramos en la red nos dicen que utilicemos el signo pound (#), pero esto no es del todo correcto ya que ese símbolo es el mismo que identifica los nombres de los vínculos internos y, por lo tanto, confunde a los navegadores.

La alternativa es colocar como atributo, el valor: javascript:void(0);:

<a href="javascript:void(0);" onclick="funcion;">CLICK</a>

Esta instrucción, le indica al navegador que el vínculo "apunta a ninguna parte" y, por lo tanto, no debe hacerse nada.

Hasta no hace mucho, esto era suficiente, pero, ciertas modificaciones en el desarrollo web han hecho que no siempre sirva, sobre todo en Internet Explorer que, desde sus páginas de ayuda, recomienda no utilizar Javascript en el atributo href.

La solución definitva del tema es, volver al href="#" pero, agregándole al evento, una instrucción final:

<a href="#" onclick="funcion;return false;">CLICK</a>

return false informa al navegador que la acción de evaluar el atributo href no debe ser ejecutada y, que no hay nada más que hacer.

En estos dos ejemplos pueden verse las diferencias, ambos ejecutarán lo mismo, cambiarán el color de un texto:

SIN RETURN

ESTE ES EL TEXTO DE EJEMPLO

CON RETURN

El código de la izquierda es el siguiente:

<a href="#" onclick="getElementById('nombre').style.backgroundColor='#FF0000';">
  SIN RETURN
</a>

En el caso de Blogger, el vínculo generado por # es:
http://URL.blogspot.com/#, a menos que lo hayamos editado con la opción Redactar, en cuyo caso se generará una dirección tipo:
http://www.blogger.com/post-create.g?blogID=XXXXXXXX.

El código de la derecha es el siguiente:

<a href="#" onclick="getElementById('nombre').style.backgroundColor='#0000FF';return false;">
  CON RETURN
</a>