Enlace HREF que no tiene como objetivo nada, no quiere usar hash o void (0)

Question

Tengo un enlace que quiero poder hacer clic para activar un fragmento del código jQuery.

Actualmente tengo

<a href="#" id="foo">Link</a> 

y

$('#foo').click(function(){ 
    // Do stuff 
}); 

que funciona bien. Pero, siempre he odiado usar hash de esta manera. La página parpadea y el hash se agrega a la URL de la página.

Una alternativa es utilizar

<a href="javascript:void(0);" id="foo">Link</a> 

pero también me gusta ver ese pedazo de código en la barra de estado del navegador. Se ve hortera.

---

Lo que yo prefiero es un marcador de posición explicativa Javascript que no hace nada, como

<a href="javascript:zoom();" id="foo">Link</a> 

que en realidad funciona, pero lanza una ReferenceError en la consola de JavaScript ya que no hay tal función. ¿Cuál es la definición mínima de una función que no hace nada?

¿Hay alguna otra alternativa?

¿Debo saltar el enlace y usar algo como

<span id="foo" style="cursor:pointer;cursor:hand;">Link</span> 

en su lugar?

Answer 1

Utilice el método event.preventDefault()^[docs].

$('#foo').click(function(e){ 

    e.preventDefault(); 
    // Do stuff 
}); 

Esto evitará que el hash tenga algún efecto al hacer clic. O deshazte del hash y usa CSS para darle un estilo.

Además, puede proporcionar una url real para que href maneje la degradación elegante.

---

¿Cuál es la definición mínima de una función que no hace nada?

Aquí es una función no-op:

var noop = function(){}; 

... o ya estás usando jQuery, puede utilizar el método jQuery.noop()^[docs], que también es sólo una función de vacío.

$.noop 

Answer 2

Puede utilizar preventDefault, por ejemplo:

$('#foo').click(function(e){ 
    // Do stuff 
    e.preventDefault(); 
}); 

Answer 3

Idealmente, el enlace debe enlazar a una página que imita la funcionalidad JavaScript habilitado para los usuarios sin JS. Entonces preventDefault prevendría la navegación real, como han indicado las otras respuestas.

Si eso no tiene sentido en este caso, tenga en cuenta que el atributo href es opcional. Puedes dejarlo por completo.

Answer 4

Este es un uso inapropiado de un enlace, debe usar un botón u otro elemento que indique que hacer clic hará que suceda algo pero no la navegación.