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

location.href javascript

Question

Los siguientes son dos métodos para construir un enlace que tiene el único propósito de ejecutar el 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>

Answer 1

A menos que esté escribiendo el enlace con JavaScript (para que sepa que está habilitado en el navegador), idealmente debería proporcionar un enlace adecuado para las personas que navegan con JavaScript desactivado y luego evitar la acción predeterminada del enlace en su clic en controlador de eventos. De esta manera, aquellos con JavaScript habilitado ejecutarán la función y los que tengan JavaScript deshabilitado pasará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.

Answer 2

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

1. contamina la historia
2. crea una nueva copia del motor
3. Se ejecuta en á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 un usuario a algún ancla sensata en la página (solo # se enviará a la parte superior) cuando algo salga 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 este: ...href="javascript_required.html" onclick="... Este es un buen enfoque, pero no distingue entre los escenarios" JavaScript deshabilitado "y" onclick fail ".

Answer 3

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 dispare si se ejecuta JavaScript.

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

Si usas Angular2, esta manera funciona:

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

Consulte aquí https://.com/a/45465728/2803344

Answer 4

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

Answer 5

Estoy de acuerdo con sugerencias en otros lugares que indican que debes usar la URL normal en el atributo href , luego llamar a alguna función de JavaScript en onclick. La falla es que automáticamente agregan el return 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 será ininteligible. El evento Onclick siempre devolverá false , por lo que no se llamará a la URL normal.

Hay una solución muy simple. Deje que la función devuelva 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 función doSomething() . Si funciona, devolverá true , por lo que será negado ( false ) y no se llamará la path/to/some/URL . Si la función devolverá el valor false (por ejemplo, el navegador no admite algo utilizado dentro de la función o cualquier otra cosa sale mal), se negará a true y se llamará la path/to/some/URL .

Answer 6

Haciendo <a href="#" onclick="myJsFunc();">Link</a> o <a href="javascript:void(0)" onclick="myJsFunc();">Link</a> o cualquier otra cosa que contenga un atributo onclick - 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 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 excesivamente detallado, que tiene muy poco beneficio (si es que lo tiene) para su base de código.

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 tiene un atributo href en absoluto! Cualquier buen restablecimiento de CSS se haría cargo del estilo de cursor predeterminado faltante, por lo que no es un problema. Luego adjunte la funcionalidad de JavaScript utilizando las mejores prácticas elegantes y discretas, que son más fáciles de mantener a medida que su lógica de JavaScript permanece en JavaScript, en lugar de en su marca, lo cual es esencial cuando comienza a desarrollar aplicaciones de JavaScript a gran escala que requieren que su lógica se divida en Blackboxed componentes y plantillas. Más sobre esto en la arquitectura de aplicaciones 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 ejemplo de Backbone.js blackboxed

Para un ejemplo de componente Backbone.js escalable, de caja negra, vea este ejemplo de jsfiddle en funcionamiento aquí . Observe cómo utilizamos prácticas de JavaScript discretas, 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. ¡Increíble!

Notas

• La omisión del atributo href en el elemento a hará que el elemento no sea accesible mediante la navegación con la tecla de tab . Si desea que esos elementos sean accesibles a través de la tecla de tab , puede establecer el atributo de tabindex , o usar los elementos de button lugar. Puede diseñar fácilmente los elementos de los botones para que se vean como enlaces normales, como se menciona en la respuesta del Tracker1 .

• Omitir el atributo href en el elemento a hará que Internet Explorer 6 e Internet Explorer 7 no adopten el estilo a a:hover , por lo que hemos agregado un simple a.hover JavaScript para lograr esto a través de a.hover . Lo cual está perfectamente bien, ya que si no tiene un atributo href y no hay 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 aún funcione con JavaScript deshabilitado, entonces use un elemento a con un atributo href que vaya a alguna URL que realizará la acción manualmente en lugar de hacerlo a través de una solicitud Ajax o lo que sea. Si está haciendo esto, entonces quiere asegurarse de hacer un event.preventDefault() en su llamada de clic para asegurarse de que cuando se haga clic en el botón no siga el enlace. Esta opción se llama degradación agraciada.

Answer 7

Lo ideal sería hacer 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 la presentación de DOM, asegurando así que si JavaScript no está presente / utilizado no lo hace haga que los manejadores de eventos sean inútiles y que mezclen su código y ofusquen (o al menos distraigan) su contenido real.

Answer 8

Ninguno.

Si puedes tener una URL real que tenga sentido, úsala 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 desactivado.

Si eso no es posible, al menos debe insertar 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, debería esforzarse por desarrollar cualquier sitio web público.

Echa un vistazo a JavaScript discreto y mejora progresiva (ambos Wikipedia).

Answer 9

Por lo tanto, cuando está haciendo algunas cosas de JavaScript con una etiqueta <a /> y si también 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 puedes 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 lograrlo son incorrectas (aunque funciona bien) . Si no se crea ningún elemento para navegar por la página y que tiene algunas cosas de JavaScript asociadas, entonces no debería ser una etiqueta <a> .

Simplemente puede usar un <button /> lugar de hacer cosas o cualquier otro elemento como b, span o lo que corresponda según sus necesidades, ya que puede agregar eventos en todos los elementos.

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

Y al final, si está vinculando el evento desde el propio código JavaScript, allí puede hacer event.preventDefault() para lograrlo si está usando la etiqueta <a> , pero si no está usando una etiqueta <a> para Esto, ahí tienes una ventaja, no necesitas hacer esto.

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

Answer 10

Recomiendo usar un elemento <button> 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 ).

Answer 11

Sería mejor usar jQuery,

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

y omita tanto href="#" como href="javascript:void(0)" .

El marcado de la etiqueta de anclaje será como

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

¡Suficientemente simple!

Answer 12

Sinceramente, yo sugeriría que no. Yo usaría un <button></button> estilizado 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 el enlace mediante script, no usar el atributo onclick en la etiqueta del elemento. El único gotcha es el efecto de texto psuedo 3d en IEs anteriores que no se pueden desactivar.

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

• Siempre interceptará en caso de que su evento onclick falle.
• No se realizarán llamadas de carga errantes o se activarán otros eventos en función de un cambio de hash
• La etiqueta de hash puede causar un comportamiento inesperado si el clic falla (lanzar con un clic), evítelo a menos que sea un comportamiento de caída adecuado y desee cambiar el historial de navegación.

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

Answer 13

Tampoco 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. Recomendaría usar una etiqueta <span> con un onclick handler adjunto y algún CSS básico para imitar un enlace. Los enlaces se hacen para la navegación, y si su código JavaScript no es para la navegación, no debería ser una etiqueta <a> .

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>

Answer 14

Usar solo # hace algunos movimientos divertidos, por lo que recomendaría usar #self si desea ahorrar en los esfuerzos de escritura de JavaScript bla, bla, #self

Answer 15

Usualmente voy por

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

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

Answer 16

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 cadena), puede causar un error 404 not found .
2. Cuando el mouse se desplaza sobre el enlace, no muestra que se trata de un script.
3. Utilizando return false; , la página no salta a la parte superior o rompe el botón de back .

Answer 17

Yo uso 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 usan doSomething() .

Una segunda razón para evitar # es que la return false; final es return false; no se ejecutará si la función llamada produce 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 que la propiedad del evento onclick 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 cualquier otra cosa) en el formato HTML se ve así:

onclick="someFunc.call(this)"

O

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

El uso de 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, entonces claramente puedes hacer tu propia elección, pero si trabajas en equipo, debes indicar lo siguiente:

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

O

Utilice href="javascript:void(0)"

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

Answer 18

Yo uso lo siguiente

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

en lugar

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

Answer 19

# 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 esforzarse por una degradación elegante (en el caso de que el usuario no tenga habilitado JavaScript ... y cuando esté con las especificaciones y el presupuesto). Además, se considera una forma incorrecta de usar los atributos y el protocolo de JavaScript directamente en HTML.

Answer 20

''#'' llevará al usuario a la parte superior de la página, por lo que normalmente me quedo con void(0) .

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

Answer 21

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

El uso de href = "#" desplaza la página a 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 estilo con CSS:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

Answer 22

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="/" class="no-link">Faux-Link</a>

No me gusta usar Hash-Tags a menos que se usen para anclajes, 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 espacio y usarlo como una forma de activar algún código JavaScript, como una ventana emergente o una revelación de contenido.

Answer 23

Dependiendo de lo que quieras lograr, puedes olvidar el clic y solo usar 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 habilitado JavaScript (lo cual es raro en donde 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 ninguna parte 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 el usuario no tiene nada que hacer clic.

Answer 24

Yo diría que la mejor manera es hacer un enlace href a una ID que nunca usaría, como # Do1Not2Use3This4Id5 o una ID similar, que está 100% seguro de que nadie usará y no ofenderá a la gente.

1. Javascript:void(0)es una mala idea y viola la Política de Seguridad de Contenido en páginas HTTPS habilitadas para CSP https://developer.mozilla.org/en/docs/Security/CSP (gracias a @ jakub.g)
2. Usando solo #hará que el usuario salte de nuevo a la parte superior cuando se presione
3. No arruinará la página si JavaScript no está habilitado (a menos que tenga un código de detección de JavaScript)
4. Si JavaScript está habilitado, puedes deshabilitar el evento predeterminado
5. Debe usar href a menos que sepa cómo evitar que su navegador seleccione un texto (no sé si usar 4 eliminará lo que impide que el navegador seleccione texto)

Básicamente, nadie mencionó 5 en este artículo, lo que creo que es importante, ya que su sitio no es profesional si de repente comienza a seleccionar las cosas en torno al enlace.

Answer 25

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

El uso de rutas URL amigables con SEO en su aplicación, como / Home / Action / Parameters también es 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 de un clic para mejorar la presentación.

Aquí hay una muestra. Home / 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. Cualquiera de las dos formas funciona, dependiendo del navegador, que satisfaga el desarrollo primero de dispositivos móviles.

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

Answer 26

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, a pesar de que está utilizando la etiqueta de anclaje, realmente no tiene un ancla aquí. Todo lo que tienes es una sección especial de un documento que debería comportarse de forma ligeramente diferente. Una <span>etiqueta es mucho más apropiada.

Answer 27

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

Ejemplo ... Digamos que tienes 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 manera, las personas con JavaScript deshabilitado se dirigen a search.phpsus espectadores con JavaScript para ver su funcionalidad mejorada.

Answer 28

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

Answer 29

Si está usando AngularJS , puede usar lo siguiente:

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

Que no hará nada.

Adicionalmente

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

Answer 30

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, así que ¿por qué no usar simplemente un spano un div?

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