Ancla de enlace vacío

Question

Tengo un anclaje que no va a ningún lado pero que tiene un clic (por ejemplo, <a onclick="..."></a>). Mi pregunta pertenece al atributo href. ¿Qué debería poner para el valor?

Si simplemente omito href, el ancla no tiene la decoración adecuada: el icono del puntero del mouse no cambia cuando se coloca el mouse sobre él.

Si uso href="#", la ventana se desplaza a la parte superior de la página cuando se hace clic en el enlace.

Si uso href="javascript:..." y pongo el valor de onclick procediendo javascript:, la página se deja y la barra de direcciones contiene el Javascript cuando se hace clic en el enlace.

Cuando me refiero al comportamiento del navegador, me refiero a Chrome, que lo estoy probando para empezar.

¿Qué debería poner para href cuando el ancla no es un enlace real pero existe solo para que el onclick realice un comportamiento?

Answer 1

En su manejador onclick, agregar esto al final:

return false; 

Esto cancelará el proceso por omisión (es decir, siguiendo el enlace) y se puede poner lo que quiera en el href (el # es tan bueno como cualquier).

Answer 2

Lo ideal tendría una opción para aquellos con JavaScript desactivado:

<a href="degrade_option.html" onclick="return fancy_option();">do the option!</a> 

Si usted no está en ese tipo de cosas, a pesar de que realmente debe ser, la forma más común es el uso de la libra, pero luego cancelar el evento para evitar la acción por defecto suceda, así:

<a href="#" onclick="return do_something();">do something</a> 

pero entonces usted tiene que asegurarse de do_something vuelve false. (O simplemente puede agregar return false; al final del controlador de clic, pero esto se torna aún más antiestético)

Aunque, para ser honesto, para empezar no debería tener atributos de Javascript en línea. Son una mala práctica, una pesadilla para mantener, y hay alternativas mucho mejores.

EDITAR: En respuesta a su comentario, la alternativa es unobtrusive javascript:

"JavaScript no obstructivo" es una técnica emergente en el lenguaje de programación JavaScript, tal como se utiliza en la World Wide Web. Aunque el término no se define formalmente, sus principios básicos son generalmente entiende que incluyen:

• separación de la funcionalidad (la "capa de comportamiento") a partir de una página Web estructura/contenido y la presentación
• mejores prácticas para evitar la problemas de programación tradicional JavaScript (como inconsistencias de navegación y la falta de escalabilidad)
• mejora progresiva de apoyo a los agentes de usuario pueden no soportar la funcionalidad avanzada de JavaScript

Lea la página para ver algunos ejemplos.

Answer 3

<a href="javascript:void(0);" onclick="...">txt</a> 

Answer 4

Prefiero dejar caer el href (no se requiere de acuerdo con la especificación W3C) si no se usa. Para obtener el cursor esperado del mouse, usa CSS.

<style type="text/css"> 
a { cursor: pointer; } 
</style> 
<a onclick="go();">link</a> 

Answer 5

<a href="javascript:;">Foo</a> 

corto, descriptivo y no salta como #.

Answer 6

Hay dos maneras de hacer esto, si la etiqueta de identificación del enlace es link, puede utilizar href="#" en el código HTML, y luego en su JavaScript tienen:

$('#link').click(function(evt) { 
// code goes here 
evt.preventDefault(); 
}); 

Esto evita que el comportamiento normal del navegador . O

$('#link').click(function(evt) { 
// code goes here 
return false; 
});