solucionar - void(0) javascript href




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

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.

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>


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


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.


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 .


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.


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


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


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!


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>


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


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 .

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.


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


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


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.


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.


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>

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.


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.


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




href