¿Qué valor "href" debo utilizar para los enlaces 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 la página, propósitos de validación, etc.?

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

or

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

preguntado el 25 de septiembre de 08 a las 15:09

30 Respuestas

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:

Utiliza 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

Utiliza href="javascript:void(0)"

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

Respondido 20 Feb 16, 02:02

Avance rápido hasta 2013: javascript:void(0) viola Política de seguridad de contenido en páginas HTTPS habilitadas para CSP. Una opción sería entonces usar href='#' y event.preventDefault() en el controlador, pero no me gusta mucho. Quizás pueda establecer una convención para usar href='#void' y asegúrese de que ningún elemento de la página tenga id="void". De esa manera, hacer clic en un enlace a un ancla no existente no desplazará la página. - jakub.g

Puede usar "#" y luego vincular un evento de clic a todos los enlaces con "#" como el href. Esto se haría en jQuery con: $('a[href="#"]').click(function(e) { e.preventDefault ? e.preventDefault() : e.returnValue = false; }); - Nathan

#void no obstante, agregaría una entrada al historial del navegador. Otra forma sería usar la URL de un recurso que devuelve el estado HTTP 204 (y aún usar preventDefault - el 204 es solo una alternativa). - cerezaDT

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).

respondido 11 mar '12, 08:03

"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.

contestado el 23 de mayo de 17 a las 13:05

Yo uso un hash real no solo # para abrir una caja de luz. He creado un código específicamente que también abre la caja de luz cuando la URL se evalúa con ese hash y agrega manualmente eventos de historial al navegador con el hash cambiado en la URL. Considero que esta es una buena práctica y algo esperado que requirió un trabajo adicional de mi parte. Sin embargo, mi código entró en conflicto con un código de desplazamiento suave de terceros que arruinó mi evento por completo. No estoy seguro de si solo culpo a su código o si este enfoque no es tan bueno después de todo. De nuevo mi caso el #hash en realidad no es solo para mantener el estilo ... - guerra redanimal

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

contestado el 11 de mayo de 17 a las 05:05

La forma de evitarlo es devolver falso en el controlador de eventos onclick. - Guvante

Devolver falso en el controlador de eventos no evita que si JavaScript, JS no se ejecute correctamente. - Quentin

el uso de "#someNonExistantAnchorName" funciona bien porque no tiene a dónde ir. - scunliffe

Si tiene un href base, entonces # or #something te llevara a ese ancla en la base href página, en lugar de en la página actual. - Abhi beckert

El shebang#!) hace el truco, pero definitivamente es una mala práctica. - Neel

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.

contestado el 06 de mayo de 18 a las 21:05

En IE8 / IE9, no puedo eliminar el desplazamiento "1D" de 3px en el estado activo del botón. - brennan roberts

@BrennanRoberts Sí, desafortunadamente, cualquier estilo de botones es más problemático con IE ... todavía siento que es probablemente el enfoque más apropiado, no es que no rompa mis propias reglas en ocasiones. - Tracker1

Entonces no uses <button> pero un input type=button ¿en lugar de? - Patrik Affentranger

Entonces usa un <clickable> elemento. O un <clickabletim> si tu prefieres. Desafortunadamente, el uso de una etiqueta no estándar o un div simple puede dificultar que los usuarios del teclado enfoquen el elemento. - joeytwiddle

Esta respuesta debería estar arriba. Si tiene este dilema, es probable que realmente necesite un button. Y IE9 está perdiendo rápidamente cuotas de mercado, afortunadamente, y el efecto activo de 1px no debería impedirnos utilizar el marcado semántico. <a> es un enlace, está destinado a enviarte a algún lugar, para las acciones que tenemos <button>'s. - mjsarfatti

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

Respondido 12 Oct 17, 13:10

Entonces, en agentes de usuario con JavaScript habilitado y la función admitida, ¿ejecutar una función de JavaScript, retrocediendo (para agentes de usuario donde el JS falla por cualquier motivo) a un enlace a la parte superior de la página? Rara vez es una alternativa sensata. - Quentin

"idealmente con un enlace real a seguir en caso de que el usuario tenga JavaScript deshabilitado", debería ir a una página útil, no #, incluso si es solo una explicación de que el sitio necesita JS para funcionar. en cuanto a fallar, esperaría que el desarrollador use la detección adecuada de funciones del navegador, etc. antes de implementar. - Zach

Asumiría (espero) que algo como esto solo sea para mostrar una ventana emergente o algo similarmente simple. En ese caso, el valor predeterminado sería la URL de la página emergente. Si esto es parte de una aplicación web, o tener JS deshabilitado rompería totalmente la página, entonces este código tiene otros problemas ... - Brian Moeskau

Mis aplicaciones web están diseñadas para degradarse con elegancia, por lo que el enlace seguirá siendo una página útil. A menos que su aplicación web sea un cliente de chat o algo tan interactivo, esto debería funcionar si dedica tiempo al diseño teniendo en cuenta la degradación. - Zach

El problema es que si myJsFunc arroja un error, no se capturará para el retorno falso. - Tracker1

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>

respondido 05 nov., 17:13

Este enfoque restringe el 'enlace' a una operación de solo mouse. Se puede visitar un ancla a través del teclado y su evento 'onclick' se activa cuando se presiona la tecla Intro. - antoniowjones

La codificación de colores en su CSS evitaría que el navegador use colores personalizados que el usuario puede definir, lo que puede ser un problema de accesibilidad. - hosam aly

<span>s no están destinados a do cualquier cosa. <A>ncors y <buttons> se utilizan para eso! - rojoShadow

Usar buttons es una mejor opción aquí mientras se usa un span no es. - nervioso

Creo que un tramo es mejor que una etiqueta de ancla. La etiqueta de anclaje existe para dirigirlo a su atributo href obligatorio. Si no va a utilizar el href, no utilice un ancla. No restringe el enlace al mouse solo porque no es un enlace. No tiene href. Es más como un botón pero no publica. El intervalo que no está destinado a hacer nada es completamente inválido. Considere un menú desplegable que se activa cuando se desplaza. Probablemente sea una combinación de intervalos y divs, que realizan la función de un botón que expande un área en la pantalla. - Cerdo Nibbly

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.

contestado el 31 de mayo de 11 a las 09:05

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,.

respondido 10 nov., 15:04

Para referencia, #self no parece ser especial. Cualquier identificador de fragmento que no coincida con el nombre o la identificación de ningún elemento en el documento (y que no esté en blanco o "arriba") debería tener el mismo efecto. - chao

Yo uso lo siguiente

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

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

Respondido 09 ago 18, 12:08

yo suelo javascript: (sin punto y coma) porque se ve más ordenado en la barra de estado al pasar el mouse. - Boann

Este código puede causar sorpresas desagradables en IE más antiguos. En algún momento solía romper los efectos de animación con imágenes, incluidos los rollovers e incluso los gifs animados: grupos.google.com/forum/#!topic/comp.lang.javascript/… - Ilya Streltsyn

Siempre puedes hacer ... javascript:void('Do foo') dado que void volverá indefinido independientemente, le dará un indicador al usuario de lo que hará al hacer clic. Dónde Do foo puede ser Delete record X o lo que te guste. - Tracker1

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 path/to/some/URL se llama.

respondido 11 mar '12, 08:03

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.)

respondido 29 nov., 19:08

Yo también creo que esta es la mejor solución. Si tiene un elemento destinado a realizar una acción, no hay razón para que sea un enlace. - mateuscb

Si preguntara y su href se vería como "#algo", algunas de las otras respuestas enumeradas podrían servir, pero: Sin el href vinculando a algo sensato, no tiene sentido tener un href, o incluso un vínculo completo. El uso sugerido del botón podría servir, o usar cualquier otro elemento que no sea un enlace gracias a los enlaces en ninguna parte. - contorno

Otra ventaja de esto es que Bootstrap .btn hace que los botones y enlaces se vean exactamente iguales. - Ciro Santilli TRUMP BAN ES MALO

Desde la perspectiva del usuario, button tampoco introduce un # en la URL ni muestra el a href como javascript :; - Coll

# 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.

respondido 23 nov., 09:20

@Muhd: el retorno debería activarse click en enlaces… - Ry- ♦

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.

Respondido el 25 de Septiembre de 08 a las 19:09

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".

Respondido 20 Feb 17, 06:02

Suelo ir por

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

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

Respondido 13 ago 15, 02:08

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

Respondido 22 ago 13, 12:08

no estoy de acuerdo con "1" porque da un error cuando pones tu enlace de script cuando los scripts no están permitidos. por lo que ese tipo de enlaces deben agregarse con el código js. de esa manera, la gente puede evitar esos enlaces mientras el script no está permitido y no ve ningún error. - Berker Yuceer

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.

Respondido 09 ago 18, 12:08

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 de usar <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.

Respondido 26 Oct 14, 12:10

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;
}

Respondido el 26 de enero de 16 a las 19:01

Utilice un botón, no un lapso. Los botones se encuentran naturalmente en el orden de enfoque, por lo que se puede acceder a ellos sin un mouse / trackpad / etc.- Quentin

Añadiendo el comentario de Ton Quentin: como está escrito actualmente, los usuarios de teclado no llegarán al span elemento porque es un elemento no enfocable. Por eso necesitas un botón. - tsundoku

Puede hacerlo enfocable agregando tabindex="0" al lapso. Dicho esto, usar el botón es mejor porque le brinda la funcionalidad deseada de forma gratuita. Para que sea accesible usando un intervalo, no solo necesita adjuntar un controlador de clic, sino un controlador de eventos de teclado que busca presionar la barra espaciadora o la tecla Intro y luego activa el controlador de clic normal. También querrá cambiar el segundo selector de CSS a .funcActuator:hover, .funcActuator:focus por lo que el hecho de que el elemento tenga foco es evidente. - Código inútil

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!

respondido 09 mar '14, 10:03

Esto es lo que iba a decir. Si un enlace tiene una URL alternativa que tiene sentido, úsela. De lo contrario, simplemente omita el href o use algo más apropiado semánticamente que un . Si la única razón por la que todos abogan por incluir el href es para mantener el dedo en el aire, un simple "a {cursor: pointer;}" funcionará. - Matt Kantor

Puedo decir que esta es la opción con la que SO decidió ir. Compruebe los enlaces de la "bandera", por ejemplo. - mtyaka

Eso le da una accesibilidad terrible. Pruébelo en SO: no puede marcar una publicación sin usar el mouse. Se puede acceder a los enlaces "enlace" y "editar" mediante tabulación, pero "marcar" no. - Nicolás

Estoy de acuerdo con esta opción. Si el ancla no tiene otro propósito que JavaScript, no debería tener un href. @Fatih: Usar jQuery significa que si JavaScript está deshabilitado, el enlace NO tendrá un puntero. - scott rippey

Si va a seguir esta ruta, ¿por qué no enlazar el clic con jQuery también? Parte de lo mejor de usar jQuery es la capacidad de separar su javascript de su marcado. - Muhd

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

Respondido 30 Jul 13, 11:07

Pero esto haría que la página se recargara, y como siempre usamos javascript para modificar la página, esto es inaceptable. - henry hu

@HenryHu Descubrí que la razón por la que no se recargó fue por AngularJS. Vea mi respuesta actualizada. - torbellino

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.

Respondido 20 Feb 17, 06:02

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.

Respondido el 24 de enero de 19 a las 23:01

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.

respondido 11 mar '12, 08:03

El único inconveniente de esto (de memoria, puedo estar equivocado) es que IE no considera que una A sea una A si no tiene un href dentro. (Entonces las reglas CSS no funcionarán) - benjol

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.

Respondido 26 Oct 14, 12:10

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.

contestado el 21 de mayo de 15 a las 01:05

Además, si tuviera que reemplazar un a con un span, deberá recordar hacerlo enfocable a través del teclado. - Y Pescador

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.

Respondido 20 Feb 17, 15:02

En realidad, no hacen lo mismo. # te hace saltar a la parte superior de la página. - jochen schultz

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 SEO 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>

respondido 11 mar '12, 09:03

En términos de SEO, preferiría esta forma. Usar tantas URL amigables definitivamente mejorará el factor de valor de la página. - Chetabahana

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).

Respondido 15 ago 18, 10:08

La entrada del blog no cita la referencia de por qué se debe evitar javascript: void (0). - antoniowjones

El vínculo está (efectivamente) roto ahora. - Pedro Mortensen

No es una buena solución para la accesibilidad: dequeuniversity.com/rules/axe/3.0/href-no-hash - Hrvoje Golcic

javascript:void(0); Tampoco es bueno si desea utilizar una política de seguridad de contenido estricta que deshabilite JavaScript en línea. - scott schupbach

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.