2689 votos

Atributo Href para enlaces JavaScript: "#" o "javascript:void(0)"?

Cuando la construcción de un vínculo que tiene el único propósito para ejecutar código JavaScript, hay 2 formas de escribir el código. Que es mejor, en términos de funcionalidad, velocidad de carga de página, fines de validación, etc?

<a href="#" onclick="myJsFunc();">Run JavaScript Code</a>

o

<a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>

1528voto

AnthonyWJones Puntos 122520

Yo uso javascript:void(0).

Tres razones. Fomentar el uso de # entre un equipo de desarrolladores, inevitablemente, conduce a algunos a usar el valor devuelto de la función a la que se llama, de esta manera:

function doSomething() {
    //Some code
    return false;
}

Pero luego se olvidan de usar return doSomething() en el onclick y lo dejan como doSomething().

Una segunda razón para evitar # es que el return false; del final, no se ejecutará si la función devuelve un error. Por lo tanto los desarrolladores también tienen que recordar manejar cualquier error adecuadamente en la función a la que se llama.

Una tercera razón es que hay casos donde el evento onclick se asigna de forma dinámica. Prefiero ser capaz de llamar a una función o asignarla de forma dinámica sin necesidad de escribirla específicamente para un método u otro. De ahí mi onclick (o cualquier evento) en HTML tendrá este aspecto:

onclick="someFunc.call(this)"

O

onclick="someFunc.apply(this, arguments)"

Utilizando javascript:void(0) te evitas todos los dolores de cabeza anteriormente mencionados. No he encontrado ninguna desventaja todavía.

Así que si eres un desarrollador solitario, puedes elegir la opción que más te guste, pero si trabajas en un equipo deberás dejar claro una u otra cosa:

--Usando href="#", asegúrate que onclick siempre contenga return false; al final,,, que cualquier función a la que se llama no devuelva un error,,, y si se puede adjuntar una función dinámica a onclick asegúrate de que no devuelva un error con false.

O

--Usa href="javascript:void(0)"

La segunda es claramente mucho más fácil comunicarla

925voto

Aaron Wagner Puntos 4556

Ninguno de los dos.

Si usted puede tener una dirección URL real que tiene sentido utilizarlo como el HREF. El onclick no se disparará si alguien medio de clics en el enlace para abrir una nueva ficha, o si tiene JavaScript desactivado.

Si eso no es posible, entonces al menos debe inyectar la etiqueta de anclaje en el documento con JavaScript y la correspondiente haga clic en controladores de eventos.

Me doy cuenta de que esto no siempre es posible, pero en mi opinión debe ser tratado en el desarrollo de cualquier sitio web público.

Retirar el JavaScript no Obstructivo y la mejora Progresiva (tanto la Wikipedia).

597voto

balupton Puntos 17805

Haciendo <a href="#" onclick="myJsFunc();">Link</a> o <a href="javascript:void(0)" onclick="myJsFunc();">Link</a> o cualquier otra cosa que contenga onclick de atributo - estaba bien de nuevo, hace cinco años, aunque ahora puede ser una mala práctica. He aquí por qué:

  1. Se promueve la práctica de la molesta JavaScript - que ha resultado ser difícil de mantener y difíciles de escalar. Más sobre esto en JavaScript no Obstructivo.

  2. Usted está gastando su tiempo en escribir increíblemente excesivamente detallado de código, que tiene muy poco (si alguna) en beneficio de su código base.

  3. Allí están ahora mejor, más fácil, y más mantenible y escalable formas de lograr el resultado deseado.

El JavaScript no obstructivo manera

Simplemente no tienen un href atributo a todos! Cualquier buen CSS reset se haría cargo de la falta cursor por defecto el estilo, así que es un no-problema. A continuación, conecte su funcionalidad JavaScript usando elegante y discreto, las mejores prácticas, las cuales son más fáciles de mantener como su lógica de JavaScript se queda en JavaScript, en lugar de en el marcado - que es esencial a la hora de iniciar el desarrollo a gran escala de aplicaciones JavaScript que requieren de su lógica de ser divididas en blackboxed componentes y plantillas. Más sobre esto en Gran escala JavaScript Arquitectura de la Aplicación)

Sencillo ejemplo de código

El código HTML:

<a class="cancel-action">Cancel this action</a>

Tu CSS:

a { cursor: pointer; color: blue; }
a:hover,a.hover { text-decoration: underline; }

Su JavaScript(usando jQuery):

// Cancel click event
$('.cancel-action').click(function(){

});

// Hover shim for Internet Explorer 6 and Internet Explorer 7.
$(document.body).on('hover','a',function(){
    $(this).toggleClass('hover');
});

Un blackboxed Backbone.js ejemplo

Para una solución escalable, blackboxed, Backbone.js componente de ejemplo - ver este trabajo jsfiddle ejemplo aquí. Observe cómo utilizamos JavaScript no obstructivo de las prácticas, y en una pequeña cantidad de código tiene un componente que puede repetirse a través de la página varias veces, sin efectos secundarios o los conflictos entre las diferentes instancias de los componentes. Increíble!

Notas

  • La omisión de la href de atributo en la a elemento hará que el elemento a no ser accesibles utilizando tab tecla de navegación. Si usted desea para los elementos para ser accesible a través de los tab clave, puede establecer el tabindex de atributo, o el uso button elementos en su lugar. Usted puede fácilmente botón estilo de elementos para ver como enlaces normales como se mencionó en Tracker1 la respuesta.

  • La omisión de la href de atributo en la a elemento hará que Internet Explorer 6 e Internet Explorer 7 para no tomar en a:hover estilo, que es la razón por la que hemos añadido un simple JavaScript calza a lograr esto a través de a.hover lugar. Lo cual es perfectamente aceptable, ya que si usted no tiene un atributo href y no la degradación elegante, a continuación, su enlace no funciona de todos modos - y vas a tener más problemas de los que preocuparse.

  • Si quieres que tu acción a seguir trabajando con JavaScript deshabilitado, a continuación, utilizando un a elemento con un href de atributo que se va a la parte de la URL que va a realizar la acción de forma manual en lugar de a través de una petición Ajax o lo que sea debe ser el camino a seguir. Si usted está haciendo esto, entonces usted quiere asegurarse de que usted hace una event.preventDefault() en su clic de llamada para asegurarse de que cuando se pulsa el botón, no siga el enlace. Esta opción se denomina degradación.

153voto

Adam Tuttle Puntos 7982

'#' se llevará al usuario a la parte superior de la página, así que yo suelo ir con void(0).

89voto

Zach Puntos 9869

La primera de ellas, idealmente con un vínculo real a seguir en caso de que el usuario tiene desactivado JavaScript. Sólo asegúrese de devolver false para evitar que el evento click de disparo si el código JavaScript se ejecuta.

<a href="#" onclick="myJsFunc(); return false;">Link</a>

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X