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


Los siguientes son dos métodos para crear 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>


3672


origen


Respuestas:


yo suelo javascript:void(0).

Tres razones Alentando el uso de # entre un equipo de desarrolladores, inevitablemente, algunos usan 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 apropiadamente en la función llamada.

Una tercera razón es que hay casos donde onclick la propiedad del evento se asigna dinámicamente. Prefiero poder invocar 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. De ahí mi onclick (o en cualquier cosa) en el marcado HTML se ven así:

onclick="someFunc.call(this)"

O

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

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

Entonces, si usted es un desarrollador solitario, entonces puede elegir claramente, pero si trabaja en equipo, debe indicar:

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

O

Utilizar href="javascript:void(0)"

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


2006



Ninguno.

Si puede tener una URL real que tenga sentido, utilícela como HREF. El onclick no se activará si alguien hace clic medio en su enlace para abrir una nueva pestaña o si tiene JavaScript desactivado.

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

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

Revisa JavaScript discreto y Mejora progresiva (ambos Wikipedia).


1198



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

  2. Estás gastando tu tiempo escribiendo un código increíblemente excesivamente detallado, que tiene muy poco beneficio (si hay alguno) para tu código base.

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

La forma discreta de JavaScript

Simplemente no tienes un href atributo en absoluto! Cualquier buen restablecimiento de CSS se haría cargo del estilo de cursor predeterminado que falta, por lo que no es un problema. A continuación, adjunte su funcionalidad de JavaScript utilizando prácticas recomendadas elegantes y discretas, que son más fáciles de mantener ya que su lógica 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 de blackboxed. Más sobre esto en Arquitectura de aplicación de 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 blackboxed Backbone.js ejemplo

Para un ejemplo de componente Backbone.js escalable, de blackbox, ver este ejemplo jsfiddle de trabajo 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 los componentes. ¡Asombroso!

Notas

  • Omitiendo el href atributo en el a elemento 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 elementos de botón para que se vean como enlaces normales como se menciona en La respuesta de Tracker1.

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

  • Si desea que su acción todavía funcione con JavaScript deshabilitado, entonces usando un a elemento con un href atributo que va a alguna URL que realizará la acción de forma manual en lugar de a través de una solicitud de Ajax o lo que sea debería ser el camino a seguir. Si estás haciendo esto, entonces debes asegurarte 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.


734



'#' 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);


281



Honestamente, no sugeriría ninguno. Yo 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 que se enlace a través de un script, sin usar el onclick atributo en la etiqueta del elemento. El único problema es el efecto de texto 3d de psuedo en IEs anteriores que no se pueden desactivar.


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

  • Siempre interceptará en caso de que su evento onclick falle.
  • No habrá llamadas de carga erróneas o desencadenará otros eventos en función de un cambio de hash
  • La etiqueta hash puede provocar un comportamiento inesperado si el clic no se cumple (intentos de clic), evítelo a menos que sea un comportamiento apropiado de abandono 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á qué hará realmente el clic.


209



El primero, idealmente con un enlace real a seguir en caso de que el usuario tenga JavaScript desactivado. Solo asegúrese de devolver false para evitar que el evento click 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


128



Idealmente harías esto:

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

O, mejor aún, tendrías el enlace de acción predeterminado en el HTML, y agregarías el evento onclick al elemento discretamente a través de JavaScript después de que el DOM renderice, asegurando así que si JavaScript no está presente / utilizado no lo haces tienen controladores de eventos inútiles que acribillan tu código y potencialmente ofuscan (o al menos distraen) tu contenido real.


90



Ni si me preguntas;

Si su "enlace" tiene el único propósito de ejecutar algún código JavaScript, no califica como un enlace; más bien una pieza de texto con una función de JavaScript acoplada a ella. Yo recomendaría usar un <span> etiqueta con un onclick handler unido a él y algunos CSS básicos para imitar un enlace. Los enlaces están hechos para la navegación, y si su código JavaScript no es para 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>


86