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

4078

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>

Peter Mortensen
fuente
202
A menos que me falte algo, no <a href="javascript:void(0)" onclick="myJsFunc();">tiene absolutamente ningún sentido. Si debe usar el javascript:protocolo psuedo, no necesita el onclickatributo también. <a href="javascript:myJsFunc();">hará bien.
Wesley Murch
65
@WesleyMurch: si myJsFunc()tiene un valor de retorno, su página se romperá. jsfiddle.net/jAd9G usted todavía tiene que utilizar voidde este modo: <a href="javascript:void myJsFunc();">. Pero entonces, el comportamiento aún sería diferente. Invocar el enlace a través del menú contextual no activa el clickevento.
gilly3
38
¿Por qué no solo <a href="javascript:;" onclick="myEvent()"?
3k-
26
javascript:;es mucho más rápido de escribir quejavascript:void(0)
Mike Causer
78
Primero pensé al mirar esto: "¿por qué usarías una <a>etiqueta si lo que quieres hacer es NO abrir otra página a través de la función del navegador nativo, sino tener alguna 'acción' de JavaScript que se activará? Simplemente usando una spanetiqueta con una clase de js-triggerprobablemente mucho mejor ". ¿O me estoy perdiendo algo?
Adrien Be

Respuestas:

2164

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.

AnthonyWJones
fuente
329
Siempre abro cada enlace en una pestaña nueva y esta es la razón por la que personalmente odio cuando la gente usa el href="javascript:void(0)"método
Timo Huovinen
182
Lo siento, no estoy de acuerdo, ¿por qué esta respuesta tiene tantos votos positivos? Cualquier uso de javascript:debe considerarse una mala práctica, molesto y no degrada de manera elegante.
Lankymart
52
Las siguientes dos respuestas son mucho mejores y razonables que esta. Además, los dos primeros argumentos no son válidos porque event.preventDefault()existen exactamente para evitar el comportamiento predeterminado (como saltar a la parte superior de la página en este caso) y hacer un mejor trabajo sin toda la return false;locura.
sudee
136
Avance rápido hasta 2013: javascript:void(0)viola la Política de seguridad de contenido en páginas HTTPS habilitadas para CSP. Una opción sería 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 asegurarse de que ningún elemento de la página lo tenga id="void". De esa manera, al hacer clic en un enlace a un ancla no existente, no se desplazará la página.
jakub.g
24
Puede usar "#" y luego vincular un evento de clic a todos los enlaces con "#" como href. Esto se haría en jQuery con:$('a[href="#"]').click(function(e) { e.preventDefault ? e.preventDefault() : e.returnValue = false; });
Nathan
1325

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

Aaron Wagner
fuente
19
¿Puede dar un ejemplo de cómo se podría "inyectar la etiqueta de anclaje en el documento con JavaScript y los controladores de eventos de clic apropiados"?
user456584
11
¿Por qué inyectar la etiqueta de anclaje si simplemente está destinada a ser utilizada para permitir que un elemento sea a) cliqueado b) muestre el cursor "puntero"? Parece irrelevante incluso inyectar una etiqueta de anclaje en este escenario.
aplastar
12
+1 para ninguno de los dos, pero hay más enfoques. El hecho sigue siendo el uso de ambas javascript:o #son malas prácticas y no se debe alentar. Buenos artículos por cierto.
Lankymart
13
@crush: tampoco usaría un div o span; francamente, esto parece ser para lo que <button>fue hecho. Pero de acuerdo: probablemente no debería ser específicamente <a>si no hay un lugar adecuado para que se vincule.
cHao
14
@cHao Button es quizás la mejor opción. Supongo que el punto principal es que el elemento HTML no debe seleccionarse en función de su apariencia de presentación predeterminada, sino más bien su importancia para la estructura del documento.
aplastar
775

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.

balupton
fuente
163
Tenga cuidado, dejar los atributos href desactivados no es compatible con el navegador cruzado y perderá cosas como los efectos de desplazamiento en Internet Explorer
Thomas Davis
16
Cuidado: el buttonenfoque de estilo de enlace sugerido aquí está plagado por el inevitable estado activo "3d" en IE9 y versiones inferiores .
Brennan Roberts
44
Me parece que esta respuesta es demasiado dogmática. Hay momentos en los que solo desea aplicar el comportamiento JS a 1 o 2 por hora. En ese caso, es excesivo definir CSS extra e inyectar una función JS completa. En algunos casos (por ejemplo, agregar contenido a través de un CMS), en realidad no se le permite inyectar CSS nuevo o JS independiente, y en línea es todo lo que puede hacer. No veo cómo la solución en línea es menos mantenible en la práctica para 1 o 2 JS a href simples. Siempre sospeche de las declaraciones generales amplias sobre las malas prácticas, incluida esta :)
Jordan Rieger
17
Con todas esas "notas" que son difíciles de resolver (¡establecer un índice de tabla es pedir problemas en una página compleja!). Mucho mejor que hacer javascript:void(0). Esa es la respuesta pragmática, y la única respuesta sensata en el mundo real.
Abhi Beckert
14
Si le interesa hacer que su aplicación web sea accesible (y debería hacerlo), la simplicidad y la cordura defienden href. La locura se encuentra en la dirección de tabindex.
jkade
328

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

Gabe Rogan
fuente
68
La forma de evitar eso es devolver falso en el controlador de eventos onclick.
Guvante
34
Devolver falso en el controlador de eventos no evita que si JavaScript el JS no se ejecute correctamente.
Quentin
28
El uso de "#someNonExistantAnchorName" funciona bien porque no tiene a dónde ir.
scunliffe
21
Si tiene una base href, entonces #o #somethinglo llevará a ese anclaje en la página base href , en lugar de en la página actual.
Abhi Beckert
11
El shebang ( #!) hace el truco, pero definitivamente es una mala práctica.
Neel
276

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.

Rastreador1
fuente
En IE8 / IE9, no puedo eliminar el desplazamiento 1px "3D" 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.
Rastreador1
¿Entonces no utilizas <button>sino un input type=buttonen su lugar?
Patrik Affentranger
44
Luego usa un <clickable>elemento. O un <clickabletim>si lo prefieres. Desafortunadamente, el uso de una etiqueta no estándar o un div simple podría dificultar que los usuarios del teclado enfoquen el elemento.
joeytwiddle
28
Esta respuesta debería estar arriba. Si tiene este dilema, es probable que realmente necesite un button. E IE9 está perdiendo rápidamente cuotas de mercado, afortunadamente, y el efecto activo de 1px no debería impedirnos usar el marcado semántico. <a>es un enlace, está destinado a enviarte a alguna parte, para acciones que tenemos <button>.
mjsarfatti
141

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

Belter
fuente
19
Entonces, en los agentes de usuario con JavaScript habilitado y la función admitida, esto ejecuta una función de JavaScript, recurriendo (para los agentes de usuario donde el JS falla por cualquier razón) a un enlace a la parte superior de la página. Esto rara vez es una alternativa sensata.
Quentin
21
"idealmente con un enlace real para 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 de funciones del navegador adecuada, etc. antes de implementar.
Zach
Supongo (espero) que algo como esto solo sea para mostrar una ventana emergente o algo similar de manera similar. 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 el
55
Mis aplicaciones web están diseñadas para degradarse con gracia, 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 a diseñar teniendo en cuenta la degradación.
Zach
2
El problema es que si myJsFunc arroja un error, no se capturará para el retorno falso.
Rastreador1
106

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>

fijter
fuente
126
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.
AnthonyWJones
40
Los colores codificados en su CSS evitarían que el navegador use colores personalizados que el usuario pueda definir, lo que puede ser un problema con la accesibilidad.
Hosam Aly
30
<span>s no están destinados a hacer nada. <A>Nchors y <buttons>se utilizan para eso!
redShadow
22
Usar buttonses una mejor opción aquí mientras que usar a spanno lo es.
apnerve
1
Creo que un lapso es mejor que una etiqueta de anclaje. La etiqueta de anclaje existe para dirigirlo a su atributo href obligatorio. Si no vas a usar el href, no uses un ancla. No restringe el enlace al mouse solo porque no es un enlace. No tiene un href. Es más como un botón, pero no se publica. El lapso que no está destinado a hacer nada es completamente inválido. Considere un menú desplegable que se activa cuando pasa el mouse por encima. Probablemente sea una combinación de tramos y divisiones, que realiza la función de un botón que expande un área en la pantalla.
NibblyPig
97

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.

Steve Paulo
fuente
76

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

Spammer Joe
fuente
77
WOW, aprobado por este consejo. Nunca supe que podría usar las #selfetiquetas con nombre y evitar el molesto comportamiento del navegador de saltar al principio de la página. Gracias.
alonso.torres
34
Como referencia, #selfno parece ser especial. Cualquier identificador de fragmento que no coincida con el nombre o la identificación de ningún elemento del documento (y que no esté en blanco o "arriba") debería tener el mismo efecto.
cHao
1
Por lo general, solo uso un nombre de ancla inventado, pero creo que comenzaré a hacerlo para ser coherente en mi trabajo.
Douglas.Sesar
11
Sugerí establecer una #voidconvención en el otro comentario, pero en realidad #selfes tan breve y fácil de memorizar. Cualquier cosa es mejor que#
jakub.g
66
Pero si hace clic en ese enlace, será extraño para el usuario ver "#void" en la url, parece un error o error, lo mismo con #self o lo que sea.
pmiranda
68

Yo uso lo siguiente

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

en lugar

<a href="javascript:void(0);" onclick="myJsFunc();">Link</a>
se_pavel
fuente
2
Uso javascript:(sin punto y coma) porque se ve más ordenado en la barra de estado al pasar el mouse.
Boann
44
Este código puede causar malas sorpresas en IE anteriores. En algún momento, solía romper cualquier efecto de animación con imágenes, incluidos rollovers e incluso gifs animados: groups.google.com/forum/#!topic/comp.lang.javascript/…
Ilya Streltsyn
Siempre puede hacer ... javascript:void('Do foo')dado que void volverá indefinido independientemente, le dará un indicador al usuario de lo que hará hacer clic. ¿Dónde Do foopuede estar Delete record Xo lo que quieras?
Rastreador1
53

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.

Fczbkk
fuente
50

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

Justin Johnson
fuente
1
@Muhd: El retorno debe activarse clicken los enlaces ...
Ry-
50

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 )

trata bien tus modificaciones
fuente
2
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 usted preguntara y su href se vería como "#algo", algunas de las otras respuestas enumeradas podrían servir, pero: sin que el href se vincule a algo sensato, no tiene sentido tener un href, o incluso un enlace completo. El uso sugerido del botón podría funcionar, o utilizar cualquier otro elemento que no sea un enlace, gracias a los enlaces en ninguna parte.
kontur
1
Otra ventaja de esto es que Bootstrap .btnhace que los botones y enlaces se vean exactamente iguales.
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
Desde la perspectiva del usuario, buttontampoco introduce un # en la URL ni muestra el ahref como javascript :;
Coll
39

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.

Simon Forrest
fuente
36

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

Consultoría gratuita
fuente
1
@Berker Yüceer, ¿por qué CW?
Consultoría gratuita el
30

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.

dnetix
fuente
27

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.
Eric Yin
fuente
No estoy de acuerdo con "1." porque da error cuando coloca su enlace de secuencia de comandos cuando las secuencias de comandos no están permitidas. así que ese tipo de enlaces debe agregarse con el código js. de esa manera, las personas pueden evitar esos enlaces mientras el script no está permitido y no ven ningún error.
Berker Yüceer
25

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.

usuario564706
fuente
24

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.

Ashish Kumar
fuente
23

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;
}
Garrett
fuente
13
Use un botón, no un lapso. Los botones caen naturalmente en el orden de enfoque, por lo que se puede acceder sin mouse / trackpad / etc.
Quentin
44
Agregando el comentario de Ton Quentin: como está escrito actualmente, los usuarios del teclado no llegarán al spanelemento porque es un elemento no enfocable. Por eso necesitas un botón.
Tsundoku
1
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 enter y luego dispara el controlador de clic normal. También desearía cambiar el segundo selector CSS para .funcActuator:hover, .funcActuator:focusque el hecho de que el elemento tenga el foco sea evidente.
Código inútil
22

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!

naveen
fuente
55
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 semánticamente apropiado que un <a>. Si la única razón por la que todos abogan por incluir el href es poner el dedo sobre el cursor, un simple "a {cursor: puntero;}" hará el truco.
Matt Kantor
12
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" tabulando, pero no a "bandera".
Nicolás
66
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
3
Si vas a seguir esta ruta, ¿por qué no vincular el clic usando jQuery también? Parte de lo bueno de usar jQuery es la capacidad de separar tu javascript de tu marcado.
Muhd
44
No puedo creer que esta respuesta tenga 11 votos. Es terrible. ¿Por qué agrega un estilo a través de Javascript (y jQuery ??) y luego define su acción onclick en HTML? Terrible.
MMM
20

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
torbellino
fuente
66
Pero esto haría que la página se volviera a cargar, y dado que siempre usamos JavaScript para modificar la página, esto es inaceptable.
Henry Hu
@HenryHu Descubrí que la razón por la que no se volvió a cargar fue por AngularJS. Ver mi respuesta actualizada.
whirlwin
19

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.

achairapart
fuente
19

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.

Andrew Moore
fuente
17

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.

mdesdev
fuente
16

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.

leerán
fuente
3
El único inconveniente con esto (de memoria, puedo estar equivocado) es que IE no considera que una A sea una A si no tiene un href dentro. (Por lo tanto, las reglas CSS no funcionarán)
Benjol
16

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.

Pilas en Pilas en Pilas
fuente
16

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.

humano inteligente
fuente
Además, si tuviera que reemplazar un acon un span, deberá recordar que debe enfocarse mediante el teclado.
AndFisher
16

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.

usuario6460587
fuente
En realidad no hacen lo mismo. # te hace saltar a la parte superior de la página.
Jochen Schultz
13

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>
Josh Simerman
fuente
En términos de SEO, preferiría de esta manera. Usar tantas URL amigables definitivamente mejorará el factor de valor de la página.
Chetabahana