¿Qué valor de "href" debo usar para los enlaces de JavaScript, "#" o "javascript: void (0)"?

Los siguientes son dos métodos para construir un enlace que tiene el único propósito de ejecutar código JavaScript. ¿Qué es mejor, en términos de funcionalidad, velocidad de carga de página, propósitos de validación, etc.?

function myJsFunc() {
    alert("myJsFunc");
}

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

o

function myJsFunc() {
    alert("myJsFunc");
}

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

Yo uso javascript:void(0).

Tres razones Fomentar el uso de #un equipo de desarrolladores inevitablemente lleva a algunos a usar el valor de retorno de la función llamada así:

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

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

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

Una tercera razón es que hay casos en los onclickque la propiedad del evento se asigna dinámicamente. Prefiero poder llamar a una función o asignarla dinámicamente sin tener que codificar la función específicamente para un método de conexión u otro. Por lo tanto, mi onclick(o en cualquier cosa) en el marcado HTML se ve así:

onclick="someFunc.call(this)"

O

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

El uso javascript:void(0)evita todos los dolores de cabeza anteriores, y no he encontrado ningún ejemplo de un inconveniente.

Entonces, si eres un desarrollador solitario, puedes elegir claramente, pero si trabajas en equipo tienes que decir:

Use href="#", asegúrese de que onclicksiempre contenga return false;al final, que cualquier función llamada no arroje un error y si asocia una función dinámicamente a la onclickpropiedad, asegúrese de que, además de no arrojar un error, regrese false.

O

Utilizar href="javascript:void(0)"

El segundo es claramente mucho más fácil de comunicar.

Ninguno.

Si puede tener una URL real que tenga sentido, úsela como HREF. El onclick no se activará si alguien hace clic con el botón central en su enlace para abrir una nueva pestaña o si tiene JavaScript deshabilitado.

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

Me doy cuenta de que esto no siempre es posible, pero en mi opinión, se debe esforzar por desarrollar cualquier sitio web público.

Consulte JavaScript discreto y mejora progresiva (ambos Wikipedia).

Hacer <a href="#" onclick="myJsFunc();">Link</a>o <a href="javascript:void(0)" onclick="myJsFunc();">Link</a>cualquier otra cosa que contenga un onclickatributo estaba bien hace cinco años, aunque ahora puede ser una mala práctica. Este es el por qué:

1. Promueve la práctica de JavaScript intrusivo, que resultó ser difícil de mantener y difícil de escalar. Más sobre esto en JavaScript discreto .

2. Estás gastando tu tiempo escribiendo código increíblemente excesivamente detallado, lo que tiene muy poco (o ningún) beneficio para tu base de código.

3. Ahora hay formas mejores, más fáciles y más fáciles de mantener y escalables para lograr el resultado deseado.

La manera discreta de JavaScript

¡Simplemente no tengo un hrefatributo en absoluto! Cualquier buen restablecimiento de CSS se encargaría del estilo de cursor predeterminado que falta, por lo que no es un problema. Luego, adjunte su funcionalidad de JavaScript utilizando las mejores prácticas elegantes y discretas, que son más fáciles de mantener ya que su lógica de JavaScript permanece en JavaScript, en lugar de en su marcado, lo cual es esencial cuando comienza a desarrollar aplicaciones de JavaScript a gran escala que requieren que su lógica se divida en componentes y plantillas en caja negra. Más sobre esto en Arquitectura de aplicaciones JavaScript a gran escala

Ejemplo de código simple

// Cancel click event
$('.cancel-action').click(function(){
    alert('Cancel action occurs!');
});

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cancel-action">Cancel this action</a>

Un ejemplo de Backbone.js en caja negra

Para ver un ejemplo de componente de Backbone.js escalable y en caja negra, vea este ejemplo de jsfiddle que funciona aquí . Observe cómo utilizamos prácticas discretas de JavaScript, y en una pequeña cantidad de código tenemos un componente que puede repetirse en la página varias veces sin efectos secundarios o conflictos entre las diferentes instancias de componentes. ¡Asombroso!

Notas

• Omitir el hrefatributo en el aelemento hará que el elemento no sea accesible usando la tabnavegación clave. Si desea que esos elementos sean accesibles a través de la tabclave, puede establecer el tabindexatributo o utilizar buttonelementos en su lugar. Puede diseñar fácilmente elementos de botón para que se vean como enlaces normales como se menciona en la respuesta de Tracker1 .

• Omitir el hrefatributo en el aelemento hará que Internet Explorer 6 e Internet Explorer 7 no adopten el a:hoverestilo, por lo que en su lugar hemos agregado una calza JavaScript simple para lograr esto a.hover. Lo cual está perfectamente bien, ya que si no tiene un atributo href y no hay degradación elegante, su enlace no funcionará de todos modos, y tendrá problemas más importantes por los que preocuparse.

• Si desea que su acción siga funcionando con JavaScript deshabilitado, use un aelemento con un hrefatributo que vaya a alguna URL que realice la acción manualmente en lugar de a través de una solicitud de Ajax o lo que sea el camino a seguir. Si está haciendo esto, entonces quiere asegurarse de hacer una event.preventDefault()llamada de clic para asegurarse de que cuando se hace clic en el botón no siga el enlace. Esta opción se llama degradación elegante.

'#'llevará al usuario de vuelta a la parte superior de la página, por lo que generalmente voy con void(0).

javascript:; también se comporta como javascript:void(0);

Yo sinceramente sugeriría que ninguno. Yo usaría un estilizado <button></button>para ese comportamiento.

button.link {
  display: inline-block;
  position: relative;
  background-color: transparent;
  cursor: pointer;
  border: 0;
  padding: 0;
  color: #00f;
  text-decoration: underline;
  font: inherit;
}

<p>A button that looks like a <button type="button" class="link">link</button>.</p>

De esta manera puedes asignar tu onclick. También sugiero vincular mediante script, no usar el onclickatributo en la etiqueta del elemento. El único problema es el efecto de texto psuedo 3d en los IE más antiguos que no se pueden deshabilitar.

Si DEBE usar un elemento A, úselo javascript:void(0);por los motivos ya mencionados.

• Siempre interceptará en caso de que su evento onclick falle.
• No habrá llamadas de carga erróneas o desencadenará otros eventos basados ​​en un cambio de hash
• La etiqueta hash puede causar un comportamiento inesperado si el clic se cae (al hacer clic), evítelo a menos que sea un comportamiento de caída apropiado y desee cambiar el historial de navegación.

NOTA: Puede reemplazarlo 0con una cadena como la javascript:void('Delete record 123')que puede servir como un indicador adicional que mostrará lo que realmente hará el clic.

El primero, idealmente con un enlace real a seguir en caso de que el usuario tenga JavaScript deshabilitado. Solo asegúrese de devolver falso para evitar que se active el evento de clic si se ejecuta JavaScript.

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

Si usa Angular2, de esta manera funciona:

<a [routerLink]="" (click)="passTheSalt()">Click me</a>.

Ver aquí https://stackoverflow.com/a/45465728/2803344

Tampoco si me preguntas;

Si su "enlace" tiene el único propósito de ejecutar algún código JavaScript, no califica como enlace; más bien un fragmento de texto con una función de JavaScript acoplada. Yo recomendaría usar un<span> etiqueta con un onclick handleradjunto y algo de CSS básico para imitar un enlace. Los enlaces están hechos para la navegación, y si su código JavaScript no es para la navegación, no debería ser una <a>etiqueta.

Ejemplo:

function callFunction() { console.log("function called"); }

.jsAction {
    cursor: pointer;
    color: #00f;
    text-decoration: underline;
}

<p>I want to call a JavaScript function <span class="jsAction" onclick="callFunction();">here</span>.</p>

Idealmente harías esto:

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

O, mejor aún, tendría el enlace de acción predeterminado en el HTML, y agregaría el evento onclick al elemento discretamente a través de JavaScript después de que se renderice el DOM, asegurando así que si JavaScript no está presente / utilizado, no tenga controladores de eventos inútiles que descifren su código y puedan ofuscar (o al menos distraer) su contenido real.

El uso solo #hace algunos movimientos divertidos, por lo que recomendaría usarlo #selfsi desea ahorrar en los esfuerzos de mecanografía JavaScript bla, bla,.

Yo uso lo siguiente

<a href="javascript:;" onclick="myJsFunc();">Link</a>

en lugar

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

Estoy de acuerdo con las sugerencias en otros lugares que indican que debe usar URL normal en el hrefatributo, luego llamar a alguna función de JavaScript en onclick. La falla es que agregan automáticamentereturn false después de la llamada.

El problema con este enfoque es que si la función no funcionará o si habrá algún problema, el enlace no se podrá hacer clic. El evento onclick siempre regresaráfalse , por lo que no se llamará a la URL normal.

Hay una solución muy simple. Dejar que la función regresetrue si funciona correctamente. Luego use el valor devuelto para determinar si el clic debe cancelarse o no:

JavaScript

function doSomething() {
    alert( 'you clicked on the link' );
    return true;
}

HTML

<a href="path/to/some/url" onclick="return !doSomething();">link text</a>

Tenga en cuenta que niego el resultado de la doSomething()función. Si funciona, volverá true, por lo que se negará ( false) y path/to/some/URLno se invocará. Si la función regresa false(por ejemplo, el navegador no admite algo usado dentro de la función o cualquier otra cosa sale mal), se niega truey path/to/some/URLse llama al.

#es mejor que javascript:anything, pero lo siguiente es aún mejor:

HTML:

<a href="/gracefully/degrading/url/with/same/functionality.ext" class="some-selector">For great justice</a>

JavaScript:

$(function() {
    $(".some-selector").click(myJsFunc);
});

Siempre debe luchar por una degradación elegante (en el caso de que el usuario no tenga habilitado JavaScript ... y cuando esté con especificaciones y presupuesto). Además, se considera una mala forma utilizar los atributos y el protocolo de JavaScript directamente en HTML.

Recomiendo usar un <button>elemento en su lugar, especialmente si se supone que el control produce un cambio en los datos. (Algo así como un POST).

Es aún mejor si inyecta los elementos discretamente, un tipo de mejora progresiva. (Ver este comentario )

A menos que esté escribiendo el enlace usando JavaScript (para que sepa que está habilitado en el navegador), lo ideal sería proporcionar un enlace adecuado para las personas que están navegando con JavaScript deshabilitado y luego evitar la acción predeterminada del enlace en su onclick controlador de eventos. De esta manera, aquellos con JavaScript habilitado ejecutarán la función y aquellos con JavaScript deshabilitado saltarán a una página apropiada (o ubicación dentro de la misma página) en lugar de simplemente hacer clic en el enlace y no sucederá nada.

Definitivamente hash ( #) es mejor porque en JavaScript es un pseudoesquema:

1. contamina la historia
2. crea una nueva copia del motor
3. se ejecuta en alcance global y no respeta el sistema de eventos.

Por supuesto, "#" con un controlador onclick que impide la acción predeterminada es [mucho] mejor. Además, un enlace que tiene el único propósito de ejecutar JavaScript no es realmente "un enlace" a menos que esté enviando al usuario a un ancla sensible en la página (solo # se enviará al principio) cuando algo sale mal. Simplemente puede simular la apariencia del enlace con la hoja de estilo y olvidarse de href.

Además, con respecto a la sugerencia de cowgod, particularmente esto: ...href="javascript_required.html" onclick="...este es un buen enfoque, pero no distingue entre los escenarios "JavaScript deshabilitado" y "onclick falla".

Por lo general voy por

<a href="javascript:;" onclick="yourFunction()">Link description</a>

Es más corto que javascript: void (0) y hace lo mismo.

Yo usaría:

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

Razones:

1. Esto hace que los hrefmotores de búsqueda lo necesiten. Si usa algo más (como una cadena), puede causar un404 not found error.
2. Cuando el mouse pasa sobre el enlace, no muestra que se trata de un script.
3. Al usar return false;, la página no salta a la parte superior ni rompe el backbotón.

Elijo usar javascript:void(0), porque usar esto podría evitar el clic derecho para abrir el menú de contenido. Pero javascript:;es más corto y hace lo mismo.

Entonces, cuando está haciendo algunas cosas de JavaScript con una <a />etiqueta y si también las coloca href="#", puede agregar return false al final del evento (en caso de enlace de evento en línea) como:

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

O puede cambiar el atributo href con JavaScript como:

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

o

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

Pero semánticamente, todas las formas anteriores para lograr esto están mal (aunque funciona bien) . Si algún elemento no se crea para navegar por la página y tiene algunas cosas de JavaScript asociadas, entonces no debería ser una <a>etiqueta.

Simplemente puede usar a <button />en su lugar para hacer cosas o cualquier otro elemento como b, span o lo que corresponda según su necesidad, porque puede agregar eventos en todos los elementos.

Por lo tanto, hay un beneficio para usar <a href="#">. Obtiene el puntero del cursor de forma predeterminada en ese elemento cuando lo hace a href="#". Para eso, creo que puedes usar CSS para esto, lo cursor:pointer;que también resuelve este problema.

Y al final, si está vinculando el evento desde el código JavaScript en sí, puede hacerlo event.preventDefault()para lograrlo si está usando una <a>etiqueta, pero si no está usando una <a>etiqueta para esto, obtendrá una ventaja, no ' No necesito hacer esto.

Entonces, si ves, es mejor no usar una etiqueta para este tipo de cosas.

No use enlaces con el único propósito de ejecutar JavaScript.

El uso de href = "#" desplaza la página hacia arriba; El uso de void (0) crea problemas de navegación dentro del navegador.

En su lugar, use un elemento que no sea un enlace:

<span onclick="myJsFunc()" class="funcActuator">myJsFunc</span>

Y dale estilo con CSS:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

Sería mejor usar jQuery,

$(document).ready(function() {
    $("a").css("cursor", "pointer");
});

y omita ambos href="#"yhref="javascript:void(0)" .

El marcado de etiqueta de anclaje será como

<a onclick="hello()">Hello</a>

¡Suficientemente simple!

Si está utilizando AngularJS , puede utilizar lo siguiente:

<a href="">Do some fancy JavaScript</a>

Lo que no hará nada.

Adicionalmente

• No lo llevará a la parte superior de la página, como con (#)
  • Por lo tanto, no necesita regresar explícitamente falsecon JavaScript
• Es breve y conciso

Si no hay hreftal vez no hay razón para usar una etiqueta de anclaje.

Puede adjuntar eventos (clic, desplazamiento, etc.) en casi todos los elementos, entonces, ¿por qué no usar solo una spano unadiv ?

Y para los usuarios con JavaScript deshabilitado: si no hay una reserva (por ejemplo, una alternativa href), al menos no deberían poder ver e interactuar con ese elemento, sea lo que sea <a>o una <span>etiqueta.

Por lo general, siempre debe tener un enlace alternativo para asegurarse de que los clientes con JavaScript deshabilitado todavía tengan alguna funcionalidad. Este concepto se llama JavaScript discreto.

Ejemplo ... Digamos que tiene el siguiente enlace de búsqueda:

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

Siempre puedes hacer lo siguiente:

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

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

De esa forma, las personas con JavaScript deshabilitado son dirigidas search.phpmientras que los espectadores con JavaScript ven su funcionalidad mejorada.

Yo personalmente los uso en combinación. Por ejemplo:

HTML

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

con un poco de jQuery

$('a[href="#"]').attr('href','javascript:void(0);');

o

$('a[href="#"]').click(function(e) {
   e.preventDefault();
});

Pero estoy usando eso solo para evitar que la página salte a la parte superior cuando el usuario hace clic en un ancla vacía. Raramente estoy usando onClick y otroson eventos directamente en HTML.

Mi sugerencia sería usar el <span>elemento con el classatributo en lugar de un ancla. Por ejemplo:

<span class="link">Link</span>

Luego asigne la función a .linkcon un script envuelto en el cuerpo y justo antes de la </body>etiqueta o en un documento externo de JavaScript.

<script>
    (function($) {
        $('.link').click(function() {
            // do something
        });
    })(jQuery);
</script>

* Nota: Para elementos creados dinámicamente, use:

$('.link').on('click', function() {
    // do something
});

Y para los elementos creados dinámicamente que se crean con elementos creados dinámicamente, use:

$(document).on('click','.link', function() {
    // do something
});

Luego puede diseñar el elemento span para que parezca un ancla con un poco de CSS:

.link {
    color: #0000ee;
    text-decoration: underline;
    cursor: pointer;
}
.link:active {
    color: red;
}

Aquí hay un ejemplo de jsFiddle de lo mencionado anteriormente.

Dependiendo de lo que quieras lograr, puedes olvidar el onclick y simplemente usar el href:

<a href="javascript:myJsFunc()">Link Text</a>

Evita la necesidad de devolver falso. No me gusta la #opción porque, como se mencionó, llevará al usuario a la parte superior de la página. Si tiene otro lugar para enviar al usuario si no tiene JavaScript habilitado (lo cual es raro en mi trabajo, pero es una muy buena idea), entonces el método propuesto por Steve funciona muy bien.

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

Por último, puede usarlo javascript:void(0)si no desea que nadie vaya a ningún lado y si no desea llamar a una función de JavaScript. Funciona muy bien si tiene una imagen con la que desea que ocurra un evento de mouseover, pero no hay nada para que el usuario haga clic.

Cuando tengo varios enlaces falsos, prefiero darles una clase de 'sin enlace'.

Luego, en jQuery, agrego el siguiente código:

$(function(){
   $('.no-link').click(function(e){
       e.preventDefault();
   });
});

Y para el HTML, el enlace es simplemente

<a href="/" class="no-link">Faux-Link</a>

No me gusta usar Hash-Tags a menos que se usen para anclas, y solo hago lo anterior cuando tengo más de dos enlaces falsos, de lo contrario voy con javascript: void (0).

<a href="javascript:void(0)" class="no-link">Faux-Link</a>

Por lo general, me gusta evitar usar un enlace y simplemente envolver algo en un lapso y usarlo como una forma de activar algún código JavaScript, como una ventana emergente o una revelación de contenido.

Creo que estás presentando una falsa dicotomía. Estas no son las únicas dos opciones.

Estoy de acuerdo con el Sr. D4V360, quien sugirió que, aunque esté utilizando la etiqueta de anclaje, realmente no tiene un ancla aquí. Todo lo que tiene es una sección especial de un documento que debería comportarse de manera ligeramente diferente. Una <span>etiqueta es mucho más apropiada.

Probé ambos en google chrome con las herramientas de desarrollo, y id="#"tardé 0.32 segundos. Mientras que el javascript:void(0)método tomó solo 0.18 segundos. Entonces, en Google Chrome, javascript:void(0)funciona mejor y más rápido.

Básicamente, estoy parafraseando de este artículo práctico usando mejoras progresivas . La respuesta breve es que nunca usa javascript:void(0);o, a #menos que su interfaz de usuario ya haya inferido que JavaScript está habilitado, en cuyo caso debe usarjavascript:void(0); . Además, no use span como enlaces, ya que eso es semánticamente falso para empezar.

También es una buena práctica utilizar rutas de URL amigables para SEO en su aplicación, como / Home / Action / Parameters. Si primero tiene un enlace a una página que funciona sin JavaScript, puede mejorar la experiencia después. Use un enlace real a una página de trabajo, luego agregue un evento onlick para mejorar la presentación.

Aquí hay una muestra. Inicio / ChangePicture es un enlace de trabajo a un formulario en una página completa con interfaz de usuario y botones de envío HTML estándar, pero se ve mejor inyectado en un diálogo modal con botones jQueryUI. De cualquier manera funciona, dependiendo del navegador, que satisface el primer desarrollo móvil.

<p><a href="Home/ChangePicture" onclick="return ChangePicture_onClick();" title="Change Picture">Change Picture</a></p>

<script type="text/javascript">
    function ChangePicture_onClick() {
        $.get('Home/ChangePicture',
              function (htmlResult) {
                  $("#ModalViewDiv").remove(); //Prevent duplicate dialogs
                  $("#modalContainer").append(htmlResult);
                  $("#ModalViewDiv").dialog({
                      width: 400,
                      modal: true,
                      buttons: {
                          "Upload": function () {
                              if(!ValidateUpload()) return false;
                              $("#ModalViewDiv").find("form").submit();
                          },
                          Cancel: function () { $(this).dialog("close"); }
                      },
                      close: function () { }
                  });
              }
        );
        return false;
    }
</script>