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

yo suelo javascript:void(0).

Tres razones. Fomentar el uso de # entre un equipo de desarrolladores conduce inevitablemente a que algunos utilicen 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 clic y solo usa doSomething().

Una segunda razón para evitar # es que el 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 de manera adecuada en la función llamada.

Una tercera razón es que hay casos en los que la onclick 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 adjunto u otro. De ahí mi onclick (o en cualquier cosa) en el marcado HTML se ve así:

onclick="someFunc.call(this)"

OR

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

Usar javascript:void(0) evita todos los dolores de cabeza anteriores, y no he encontrado ningún ejemplo de desventaja.

Entonces, si eres un desarrollador solitario, claramente puedes hacer tu propia elección, pero si trabajas en equipo, debes indicar:

Utilice la herramienta href="#", asegurarse onclick siempre contiene return false; al final, que cualquier función llamada no arroja un error y si adjunta una función dinámicamente al onclick propiedad asegúrese de que, además de no arrojar un error, devuelva false.

OR

Utilice la herramienta 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, utilícela como HREF. El onclick no se activará si alguien hace clic en el medio en su enlace para abrir una nueva pestaña o si tiene JavaScript desactivado.

Si eso no es posible, al menos debería inyectar la etiqueta de anclaje en el documento con JavaScript y los controladores de eventos de clic adecuados.

Me doy cuenta de que esto no siempre es posible, pero en mi opinión, debería esforzarse por lograrlo al desarrollar cualquier sitio web público.

Comprar JavaScript discreto y Mejora progresiva (ambos Wikipedia).

"Hacer" <a href="#" onclick="myJsFunc();">Link</a> or <a href="javascript:void(0)" onclick="myJsFunc();">Link</a> o cualquier otra cosa que contenga un onclick atributo - 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 ha resultado ser difícil de mantener y difícil de escalar. Más sobre esto en JavaScript discreto.

2. Está gastando su tiempo escribiendo código increíblemente demasiado detallado, lo que tiene muy poco beneficio (si es que tiene alguno) para su base de código.

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

La forma discreta de JavaScript

Simplemente no tengo un href atributo 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, que 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>

Una caja negra Backbone.js ejemplo

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

Notas

• Omitiendo el href Atributo en el a element hará que el elemento no sea accesible usando tab navegación clave. Si desea que esos elementos sean accesibles a través del tab clave, puede configurar el tabindex atributo o uso button elementos en su lugar. Puede diseñar fácilmente los elementos de los botones para que se vean como enlaces normales como se menciona en Respuesta de Tracker1.

• Omitiendo el href Atributo en el a el elemento causará Internet Explorer 6 y Internet Explorer 7 para no asumir el a:hover estilo, por lo que hemos agregado una simple corrección de JavaScript para lograr esto a través de a.hover en lugar de. Lo cual está perfectamente bien, como si no tuviera un atributo href ni una degradación elegante, su enlace no funcionará de todos modos, y tendrá problemas más importantes de los que preocuparse.

• Si desea que su acción siga funcionando con JavaScript deshabilitado, utilice un a elemento con un href atributo que va a alguna URL que realizará la acción manualmente en lugar de a través de una solicitud Ajax o lo que sea el camino a seguir. Si está haciendo esto, entonces quiere asegurarse de hacer un event.preventDefault() en su llamada de clic para asegurarse de que cuando se hace clic en el botón no sigue 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 normalmente voy con void(0).

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

Sinceramente, no sugeriría ninguno de los dos. Usaría un estilizado <button></button> por 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 puede asignar su onclick. También sugiero enlazar a través de un script, no usar el onclick atributo en la etiqueta del elemento. El único problema es el efecto de texto psuedo 3d en IE más antiguos que no se puede desactivar.

Si DEBE usar un elemento A, usar javascript:void(0); por las razones ya mencionadas.

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

NOTA: Puede reemplazar el 0 con una cuerda como 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 desactivado. Solo asegúrese de devolver falso para evitar que el evento de clic se active 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>.

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

Ni si me preguntas a mí;

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. Recomendaría usar un <span> etiqueta con un onclick handler adjunto a él 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 un <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 de forma discreta a través de JavaScript después de que el DOM se procese, asegurando así que si JavaScript no está presente / utilizado, no lo hará. tenga controladores de eventos inútiles que acribillen su código y puedan ofuscar (o al menos distraer) su contenido real.

Usando solo # hace algunos movimientos divertidos, por lo que recomendaría usar #self si desea ahorrar en esfuerzos de mecanografía de JavaScript bla, bla,.

Yo uso lo siguiente

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

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

Estoy de acuerdo con las sugerencias en otros lugares que indican que debe usar una URL normal en href atributo, luego llame a alguna función de JavaScript en onclick. El defecto es que añaden automáticamente return false después de la llamada.

El problema con este enfoque es que si la función no funciona o si hay algún problema, no se podrá hacer clic en el enlace. El evento Onclick siempre volverá false, por lo que no se llamará a la URL normal.

Hay una solución muy sencilla. Deje que la función regrese true 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 será negado (false) y el path/to/some/URL no será llamado. Si la función volverá false (por ejemplo, el navegador no admite algo que se usa dentro de la función o cualquier otra cosa sale mal), se niega a true y el path/to/some/URL se llama.

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

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

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

HTML:

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

JavaScript:

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

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

A menos que esté escribiendo el enlace usando JavaScript (para que sepa que está habilitado en el navegador), idealmente debería proporcionar un enlace adecuado para las personas que navegan 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 pasar 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 el ámbito global y no respeta el sistema de eventos.

Por supuesto, "#" con un controlador onclick que evita 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 algún 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 en absoluto.

Además, con respecto a la sugerencia del dios de la vaca, particularmente esto: ...href="javascript_required.html" onclick="... Este es un buen enfoque, pero no distingue entre escenarios de "JavaScript desactivado" y "onclick falla".

Suelo ir 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 el href simple, los motores de búsqueda lo necesitan. Si usa cualquier otra cosa (como una cuerda), puede causar una 404 not found error.
2. Cuando el mouse pasa sobre el enlace, no muestra que se trata de un script.
3. Mediante el uso return false;, la página no salta a la parte superior ni rompe el back del botón.

Yo elijo usar javascript:void(0), porque usar esto podría evitar que 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 un <a /> etiqueta y si pones href="#" también, puedes agregar falso retorno al final del evento (en caso de vinculación de eventos en línea) me gusta:

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

O puede cambiar el href atributo 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 de lograr esto son incorrectas. (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 un <a> etiqueta.

Simplemente puede usar un <button /> en su lugar, hacer cosas o cualquier otro elemento como b, span o lo que se ajuste a su necesidad, porque se le permite agregar eventos en todos los elementos.

¿Entonces hay un beneficio que se utilizará <a href="#">. Obtienes el puntero del cursor de forma predeterminada en ese elemento cuando lo haces a href="#". Para eso, creo que puedes usar CSS para esto como cursor:pointer; que resuelve este problema también.

Y al final, si está vinculando el evento desde el propio código JavaScript, allí puede hacerlo event.preventDefault() para lograr esto si está utilizando <a> etiqueta, pero si no está utilizando una <a> etiqueta para esto, obtendrá una ventaja, no es necesario que haga esto.

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

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

El uso de href = "#" desplaza la página hacia la parte superior; 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 estilícelo con CSS:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

Sería mejor usar jQuery,

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

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

El marcado de la etiqueta de anclaje será como

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

¡Suficientemente simple!

Si está usando AngularJS, puede utilizar lo siguiente:

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

Que no hará nada.

Además de reunir registros

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

Por lo general, siempre debe tener un enlace de respaldo para asegurarse de que los clientes con JavaScript deshabilitado aún 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 puede 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 a search.php mientras 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);');

or

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

Pero lo estoy usando solo para evitar que la página salte a la parte superior cuando el usuario hace clic en un ancla vacía. Rara vez uso onClick y otros on eventos directamente en HTML.

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

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

Luego asigne la función a .link con un guión envuelto en el cuerpo y justo antes del </body> etiqueta o en un documento JavaScript externo.

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

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

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

Y para 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í está un jsFiddle ejemplo de lo mencionado anteriormente.

Dependiendo de lo que desee lograr, puede olvidar el clic y simplemente usar el href:

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

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

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

Por último, puedes usar javascript:void(0) si no quiere que nadie vaya a ninguna parte y si no quiere 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 en lo que el usuario pueda hacer clic.

Cuando tengo varios enlaces falsos, prefiero darles una clase de "no 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="/es/" 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, uso javascript: void (0).

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

Por lo general, me gusta simplemente evitar el uso de 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 presenta una falsa dicotomía. Éstas no son las únicas dos opciones.

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

Probé tanto en Google Chrome con las herramientas de desarrollo como en el id="#" tomó 0.32 segundos. Mientras que la javascript:void(0) El método tomó sólo 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 que utiliza la mejora progresiva. La respuesta corta es que nunca usas javascript:void(0); or # a menos que su interfaz de usuario ya haya inferido que JavaScript está habilitado, en cuyo caso debe usar javascript:void(0);. Además, no use span como enlaces, ya que para empezar es semánticamente falso.

Usar Visibilidad WEB Las rutas URL amigables en su aplicación, como / Inicio / Acción / Parámetros, también son una buena práctica. Si tiene un enlace a una página que funciona sin JavaScript primero, 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í tienes una muestra. Inicio / ChangePicture es un enlace funcional 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, lo 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>

Es bueno que su sitio sea accesible para usuarios con JavaScript deshabilitado, en cuyo caso el href apunta a una página que realiza la misma acción que el JavaScript que se está ejecutando. De lo contrario, uso "#" con un "return false;"para evitar la acción predeterminada (desplazarse hasta la parte superior de la página) como han mencionado otros.

Buscando en Google "javascript:void(0)"proporciona mucha información sobre este tema. Algunos de ellos, como esta mencionar razones para NO use void (0).