Enlaces utilizados para activar funciones de JavaScript

¿Qué valor “href” debo usar para los enlaces de JavaScript, “#” o “javascript:void(0)”?

Cuando creas una aplicación usando JavaScript simple, a veces tendrás la necesidad de activar una función cuando el usuario haga clic en un enlace.

Generalmente puedes hacer esto de dos maneras.

Supongamos que la función que desea ejecutar se llama handleClick():

function handleClick() { alert('clicked')}

La primera forma es utilizar un enlace como este:

a href="#"Click here/a

La segunda forma es utilizar

a href="javascript:void(0)"Click here/a

Ambas son sintaxis muy similares, la única diferencia es el hrefvalor del atributo.

El primero es href="#", el segundo es href="javascript:void(0)". También puede ver esta sintaxis href="javascript:;", que es equivalente a la segunda.

Ahora bien, ¿cuál es la diferencia en el comportamiento de esos dos métodos?

Cuando el usuario hace clic en el href="#"enlace, debe asegurarse de regresar falsedesde el controlador de eventos, de lo contrario, el navegador se desplazará nuevamente a la parte superior de la página:

function handleClick() { alert('clicked') return false}

Además, incluso si agregas esto pero JavaScript está deshabilitado o no se ejecuta por algún motivo, el navegador vuelve a desplazarse hasta la parte superior de la página. Esto es algo que casi siempre se debe evitar, por lo que yo personalmente usaría la segunda forma, href="javascript:void(0)".

En ambos casos, la handleClick()función no se llamaría si JavaScript está deshabilitado o hay un error en JavaScript y, por lo tanto, se detiene la ejecución de JavaScript.

Para evitar esto, puedes usar una URL real como hrefrespaldo, de modo que los navegadores muevan al usuario a una página específica, utilizando el método HTTP GET, aunque esto no siempre es posible o conveniente.

Pero es una buena práctica y las mejores prácticas no siempre son convenientes, pero hay que tenerlas en cuenta durante la fase de diseño de la aplicación, porque no se puede simplemente construir para el caso de uso ideal e ignorar todas las cosas posibles que podrían salir mal.

Si algo sale mal, el usuario te culpará a ti y a tus enlaces rotos

Tips para principiantes de JavaScript

Tal vez te puede interesar:

1. Cómo generar un número aleatorio entre dos números en JavaScript
2. Cómo esperar el evento DOM listo en JavaScript simple
3. Cómo determinar si una fecha es hoy en JavaScript
4. Cómo contar el número de propiedades en un objeto JavaScript

Enlaces utilizados para activar funciones de JavaScript

¿Qué valor “href” debo usar para los enlaces de JavaScript, “#” o “javascript:void(0)”?

programar

es

2025-01-21

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente