¿Cuál es la forma correcta de cambiar el comportamiento de una etiqueta <a>?

Question

Quiero hacer un enlace llamar a una función de Javascript a través del evento onclick y no hacer nada más (siga el enlace). ¿Cuál es la mejor manera de hacer eso? Yo suelo hacer esto:

<a href="#" onclick="foo()">Click</a> 

Pero no estoy seguro de que es la mejor manera y en este caso se está navegando hacia pagina.html # que no es bueno para lo que estoy haciendo.

Answer 1

Por lo general, siempre se debe tener una caída posterior enlace para asegurarse de que los clientes con JavaScript desactivado todavía tiene algunas funciones . Este concepto se llama JavaScript discreto. Ejemplo...Digamos que usted tiene el siguiente enlace de búsqueda:

<a href="search.php" id="searchLink">Search</a> 

Siempre se puede hacer lo siguiente:

var link = document.getElementById('searchLink'); 

link.onclick = function() { 
    try { 
     // Do Stuff Here   
    } finally { 
     return false; 
    } 
}; 

De esa manera, las personas con JavaScript desactivado se dirigen a search.php mientras que sus espectadores con JavaScript ver su funcionalidad mejorada.

Editar:nickf Como se ha señalado en el comentario # 2, una oportunidad y captura evitarán que el enlace a seguir si hay un error en el controlador.

Answer 2

<a href="javascript: foo()" >Click</a> 

Answer 3

Sólo asegúrese de volver false de su manejador onclick. P.ej. foo() deberían definirse como:

function foo() { 
    // ... do stuff 
    return false; 
} 

Alguien señaló en los comentarios que usted puede necesitar cambiar el código HTML ligeramente, para conseguirlo:

<a href="#" onclick="return foo()">Click</a> 

o simplemente poner en el código HTML:

<a href="#" onclick="foo(); return false;">Click</a> 

Answer 4

retorno falsa después de llamar a foo()

Answer 5

si se incluyen

return false; 

desde el evento onclick, la página no se cargará en absoluto. Por ejemplo:

<a href="#" onclick="foo();return false;">Click</a> 

O en la propia función:

function foo() { 
    // other stuff 
    return false; 
} 

Answer 6

Establecer el atributo href para ejecutar el código JavaScript. De esta manera:

<a href="javascript:foo()">Click</a>

De esta manera la totalidad de su a: hover estilos CSS funcionan como se esperaba.

Answer 7

El problema con href="#" es que lanzará el navegador a la parte superior de la página. Puede hacerlo:

<a href="javascript:foo()">clicky</a> 

Aunque hay más personas que recomiendan no hacerlo (separación de capas). Una mejor manera, utilizando Prototype (igual de fácil en jQuery, et al):

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

$('foo').observe('click', function(evt) { 
    foo(); 
    evt.stop(); // keeps it from navigating to the href url 
}); 

Answer 8

En primer lugar, hay dos formas de configurar el href - que puede hacer ya sea como usted ha indicado anteriormente con el href referencia a un ' # ', o puede configurar el href para hacer referencia a "javascript :;"

En segundo lugar, siempre recomiendo mantener el JavaScript en un archivo externo y luego administrar el controlador de eventos allí. Suponiendo que le gustaría configurar esto cada vez que se carga la página, usted podría hacer algo como esto:

window.onload = { 
    var myLink = document.getElementById('myLinkID'); 
    myLink.onclick = function(evt) { 
     var evt = (evt) ? evt : ((event) ? event : null); // for cross-browser issues 
     evt.preventDefault(); 
     evt.stopPropagation(); 
     foo(); 
    } 
} 

Answer 9

Una gran cantidad de confusión es en torno al uso de un-tags porque cruzan en navegador admite el: hover pseudo-css-selector ...

Por lo tanto, es a menudo evidente para utilizar un tag-a, ya que representaría de forma diferente según las diferentes etapas del mouse-hover ...

Algunos afirmarían que la funcionalidad incorporada en la: seudomarjeta hover no debería estar disponible en absoluto, ya que la intención del W3C es separar el contenido, visual presentación y funcionalidad en las tres partes de html dinámico; html, css y javascript.

Pero por ahora estamos atrapados con eso, y por el momento es funcional usar etiquetas a en muchas formas, ya que cumplen tareas de una manera simple, y es directo hacia adelante browser! -)

Pero eso significa que a veces tiene que desactivar el comportamiento predeterminado de esas etiquetas de enlace, y eso significa que tiene que hacer que el evento onclick return sea falso, cuando no tiene sentido cambiar el contenido del documento actual ...

Sin embargo, se pueden hacer muy buenos ejemplos del uso del descarte del comportamiento predeterminado, un ejemplo podría ser proporcionar una ventana emergente con ciertas propiedades incluso si el usuario ha desactivado el uso de javascript:

<a href="http://en.wikipedia.org/wiki/Css" target="_blank" onclick="window.open(this.href,'_blank','width=600,height=450,status=no');return false;">Show wikipedia css</a> 

Answer 10

Guárdese simplemente usando

<a href="#">Click</a>

ya que puede causar un desagradable IE6 problem.

Siempre recomiendo usar un ancla que apunta a nada. Me gusta usar esta

<a href="#MAGIC">Click</a>

porque me hace reír.