Javascript y etiquetas de anclaje, ¿práctica recomendada?

Question

Pregunta rápida.

¿Deberíamos poner Javascript en el HREF o usar onClick (evento)?

¿Hay algún pros/contra para usar cualquiera de los dos. En lo personal creo que es más fácil/más limpio para simplemente poner el código en el href, y no tener que volver falsa o preocuparse acerca del salto a #

¿Hay problemas específicos del navegador conocido con cada método ...

Ejemplos:

<a href="javascript: alert('foo!');">Click Me</a> 
<a href="#" onClick="alert('foo!');return false">Click Me</a> 
<a href="javascript:void(0)" onclick="alert('foo!');">Click Me</a> 

Answer 1

1) En lugar utilizar onclick. Asegúrese de tener una URL de reserva racional en href cuando JS no está permitido.

2) En lugar de onclick="...", debe usar el controlador de eventos. Encuentra elementos usando jQuery o XPath, y luego para cada uno, llama al element.addEventListener().

element.addEventListener("click", function() { alert("bar"); }, false); 

O la manera antigua ...

element.onclick = function() { alert("foo"); }; 

Answer 2

En el evento onclick (aunque asignado con JS en lugar del atributo) con un atributo sensible href. Build on things that work

Answer 3

En general, me gustaría externalizar JavaScript pero el uso de la href llamarlo:

<a href="javascript:foo('bar!');">Click Me</a>

Aunque creo que su rápida alert ejemplo, está bien como una excepción a la regla.

Sin embargo, si el uso de una biblioteca como jQuery JS puede asignar, por supuesto, eventos directamente - ver el primer ejemplo de jQuery tutorial que se ve en el elemento de anclaje http://docs.jquery.com/Tutorials:How_jQuery_Works

Answer 4

Mantener el código HTML independiente de la OMI es más limpio.

<a id="foo" href="#">Click Me</a> 

Luego, en la cabeza o el archivo js separado:

document.getElementByID("foo").onclick = function() { alert("hi"); } 

Answer 5

yo personalmente no poner el código JavaScript en el HTML. Debería usar un detector de eventos que se activará cuando se haga clic en <a>.

<a href="#" id="linkA">Click Me</a> 

Y luego:

document.getElementById('linkA').addEventListener('click', function(e){ 
    e.preventDefault(); // Prevents page from scrolling to the top 
    alert('foo!'); 
});