JMiur [E]

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>

28 comentarios:

kstor  

Muy interesante lo que decis de estos atributos... buena data.

Responder
JMiur  

Gracias, amigos, es un tema de esos que cuesta entender y que puede volvernos locos cuando copiamos rutinas o códigos de otras páginas ya que cada editor las interpreta de una manera diferente.

Responder
Toni  

Jmiur, tengo un problemilla que debe ser algo simple pero que no encuentro la solución, así que me dirijo a ti que eres un especialista en estos temas...

Tengo un muestrario de fotos en una página, con una serie de enlaces a cada foto con sus diferentes resoluciones, por supuesto al pulsar sale la imagen, pero lo que quiero es que se produzca la descarga y no que aparezca la imagen que por otra parte ya está en el muestrario...

¿Es factible hacer eso?
¿Qué solución me aconsejas?

Algo sencillo que no soy un especialista en estos temas.

Este comentario ya lo mandé pero me dio un error, así que no se si lo has recibido o no.

Gracia y salud.

Responder
JMiur  

Es la primera vez que veo el comentario, Toni.

Con HTML no hay forma de hacerlo, haciendo click en cualquier vínculo, se abrirá el contenido. En ese caso, sólo queda advertir que para descargar se use el botón derecho del mouse.

Puede hacerse con PHP pero ese no es mi fuerte. Sin embargo, buscando en la red, he encontrado ESTA PAGINA donde explican un método que tal vez pueda servirte. Lo he leído y me pareció que era bastante simple de insertar en WordPress.

Tal vez te sirva de orientación :)

Responder
Toni  

Muchas gracias Jmuir, hasta pronto.

Responder
Anónimo  

Muchas Gracias por su pequeña pero muy valiosa contribución.

Responder
Anónimo  

Gracias por la mano, otra cosa: en el caso que se quiera abrir un popup, es fundamental para que funcione el IE 7 no dejar espacios en el titulo de la ventana, ejemplo incorrecto:
window.open
(url,'mi ventana','atributos').
'mi ventana' debe ir todo junto ->
'miventana'

Responder
JMiur  

Gracias por la información :)

Responder
Anónimo  

muy agradecido maestro gracias por su tiempo

Responder
Lucas G.M.  

El símbolo # ¿ no lleva al principio de la página al darle click?

Responder
JMiur  

Depende del sistema en donde esté. En Blogger sí porque si ves el código fuente, verás que es reepmazado por la URL de la entrada. Si quiere usarse hay que agregarle return false para que el HREF no haga nada.

Tambien puede hacerse así:

href="javascript:mifuncion();"

sin el evento onclick.

Responder
Plethoras  

Está usted en todo señor JMiur. Muchas gracias, me ha sido de gran ayuda.

Responder
Plethoras  

Después de probar esta solución en un blog que estoy montando me doy cuenta de que no satisface mis necesidades; es decir, no recuerda que enlaces han sido o no visitados. ¿Tiene idea de como conseguir esto sin sacrificar las ventajas conseguidas con el "return false"?
Muchas gracias por adelantado

Responder
JMiur  

Me parece que eso depende de las propiedades CSS, no sé si depende del contenido del atributo HREF.

Responder
fires  

muchísimas gracias por la información..no lo sabía..siempre veía el javascript:void(0); pero no lo entendía..ahora ya lo entinedo ..
mil gracias..
saludos desde Paraguay

Responder
JMiur  

Saludos, fires, me alegra que sirviera :)

Responder
Carlos Martínez  

Hola JMiur, siempre con tu sabiduría ayudando a los mas necesitados :). Una preguntita que viene a mi cabeza y que necesito, veras, estoy haciendo un efecto con imagenes usando javascript con html y php, la cosa es que el efecto utiliza el href de la imagen para hacer el efecto y el php necesita usar también ese href... para ser mas claro, tengo esto:

href="Imagenes/computacion I.gif"

y necesito que en el href este algo asi:

sistemas.php?MATERIA=Computacion I

Donde le digo que al hacer click a la imagen la materia es computacion I, pero no puedo dejar de colocar en el href la dirección de la imagen porque sino no me va el script. No se si podrías ayudarme diciéndome como leer el id que esta en la imagen con php, algo confuso pero trato de ser lo mas explicito posible :P

PD: No es para un trabajo ni nada asi que no hay prisas, es solo para aprender y ser el mejor (esa es la meta que nadie alcanzara jamás pero que siempre se debe buscar) ;)

Responder
JMiur  

Sí, es un poco confuso. ¿Qué hace el enlace? ¿Abre otra página y esa página es variable o despliega algún contenido? Si hay un dato extra que quieras tener o leer, las etiquetas tiene otros atributos como REL por ejemplo que pueden usarse para contener datos extras.

Estoy divagando un poco porque no comprendo bien la idea :$

Responder
_CarlitoX_  

Hola, disculpa la tardanza en responder pero no habia tenido tiempo, veras, estoy utilizando el script de FancyZoom, la cuestión es que utiliza el href para hacer el efecto de zoom a la imagen y necesito también usar ese vinculo para pasar una variable mediante PHP, para pasar la imagen coloco en esto, href="mipagina.php?Variable=valor", pero para que funcione el script necesito que en el href también este la dirección de la imagen, href="miImagen.ext"

Responder
JMiur  

Eso parece bastante complicado porque hay un script complejo de por medio. Tal vez, modificando ese script de alguna manera pero, no sabría responderte con exactitud cómo hacerlo.

Responder
_CarlitoX_  

mmmm... Bueno, gracias, estudiare el script a fondo, de cualquier modo que script me recomiendas que sea parecido en caso de que no pueda y tenga que cambiar de script, porque la idea es que me haga zoom la imagen de esa forma, es decir con un efecto que pareciera que salta la imagen y se pone grande pero que al mover la página la imagen quede donde esta y no se mueva con todo y página (esta algo difícil encontrar otro efecto así), se que no es fácil encontrar algo así, por eso pido consejos de que script se vería bien estéticamente o si existe algo similar en CSS (probablemente en CSS3 lo hay ahora pero aun no estoy sumergido en eso)

Responder
JMiur  

Pués, no sabría decirte; como bien dices, no es sencillo de hacer. Deberías buscar ventanas modales o algo similar.

Responder
_CarlitoX_  

Ok, bueno, paseare por tu blog hasta encontrar un efecto bueno donde pueda aplicar esto, una vez tenga rato libre me dedicare al hobby de programar en CSS, en especial a su versión 3 ya que por allí debe haber un efecto que haga lo mismo y usando CSS :D... Saludos, gracias y disculpa las molestias.

Responder
Jorge Alejandro de la Cruz Torres  

Información muy útil sin duda alguna sobre estos detalle de manejar la etiqueta de enlace de formas alternativas. Gracias por el dato.

Responder
axel cortez  

Una pregunta, pongo el # en el href y en el evento onClick llamo a una funcion de javascript, al final de esta funcion tendría que colocar el return false verdad?

JMiur  

Si, peo el resultado dependerá del sistema donde esté colocado ya que algunos, cambian el contenido de href por la url completa. Puede usarse # o javascript:void(0).

También se puede poner el evento onclick en cualquier otra etiqueta y allí ya no hay dificultades.

Responder
Nolberto  

Hola, necesito que al cargar una pagina que tiene un formulario y debajo que me aparezca un div con los datos cargados de una tabla de la BD, lo he intentado con onload del body, hasta ahi todo bien, el problema sucede que utilizar el onclik del boton llamar a otra funcion para agregar datos con el formulario esta no funciona, como si no pasara nada.

JMiur  

Imposible saberlo sin ver el ejemplo concreto.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR