¿Qué significa "javascript: void (0)"?

<a href="javascript:void(0)" id="loginlink">login</a>

Lo he visto hrefmuchas veces, pero no sé qué significa exactamente eso.

El voidoperador evalúa la expresión dada y luego regresa undefined.

El voidoperador a menudo se usa simplemente para obtener el undefinedvalor primitivo, generalmente usando " void(0)" (que es equivalente a " void 0"). En estos casos, la variable global undefined se puede usar en su lugar (suponiendo que no se haya asignado a un valor no predeterminado).

Aquí se proporciona una explicación: voidoperador .

La razón por la que desea hacer esto con hrefun enlace es que, normalmente, una javascript:URL redirigirá el navegador a una versión de texto sin formato del resultado de la evaluación de ese JavaScript. Pero si el resultado es undefined, entonces el navegador permanece en la misma página. void(0)es solo un script corto y simple que evalúa undefined.

Además de la respuesta técnica, javascript:voidsignifica que el autor está haciendo mal.

No hay una buena razón para usar una javascript:pseudo URL (*). En la práctica, causará confusión o errores si alguien prueba cosas como 'enlace de marcador', 'abrir enlace en una nueva pestaña', etc. Esto sucede mucho ahora que la gente se ha acostumbrado a hacer clic con el botón central para una nueva pestaña: parece un enlace, desea leerlo en una pestaña nueva, pero resulta que no es un enlace real, y da resultados no deseados, como una página en blanco o un error JS cuando se hace clic con el botón central.

<a href="#">es una alternativa común que podría decirse que es menos mala. Sin embargo, debe recordar hacerlo return falsedesde su onclickcontrolador de eventos para evitar que se siga el enlace y se desplace hacia la parte superior de la página.

En algunos casos, puede haber un lugar útil real para apuntar el enlace. Por ejemplo, si tiene un control en el que puede hacer clic para abrir un elemento previamente oculto <div id="foo">, tiene sentido usarlo <a href="#foo">para vincularlo. O si hay una forma que no sea JavaScript de hacer lo mismo (por ejemplo, 'thispage.php? Show = foo' que establece foo visible para empezar), puede vincular a eso.

De lo contrario, si un enlace apunta solo a algún script, no es realmente un enlace y no debe marcarse como tal. El enfoque habitual sería agregar onclicka a <span>, <div>o an <a>sin an hrefy aplicarle un estilo para que quede claro que puede hacer clic en él. Esto es lo que StackOverflow [hizo al momento de escribir; ahora usa href="#"].

La desventaja de esto es que pierde el control del teclado, ya que no puede tabular en un span / div / bare-a o activarlo con espacio. Si esto es realmente una desventaja depende de qué tipo de acción se pretende que tome el elemento. Puede, con un poco de esfuerzo, intentar imitar la interacción del teclado agregando tabIndexa al elemento y escuchando una tecla de espacio. Pero nunca va a reproducir al 100% el comportamiento real del navegador, sobre todo porque los diferentes navegadores pueden responder al teclado de manera diferente (sin mencionar los navegadores no visuales).

Si realmente desea un elemento que no sea un enlace pero que pueda activarse normalmente con el mouse o el teclado, lo que desea es un <button type="button">(o <input type="button">es igual de bueno, para contenidos textuales simples). Siempre puede usar CSS para rediseñarlo para que se parezca más a un enlace que a un botón, si lo desea. Pero como se comporta como un botón, así es como realmente debe marcarlo.

(*: en la creación de sitios, de todos modos. Obviamente son útiles para los marcadores. Las javascript:pseudo-URL son una extrañeza conceptual: un localizador que no apunta a una ubicación, sino que llama a un código activo dentro de la ubicación actual. Han causado una seguridad masiva problemas para navegadores y aplicaciones web, y Netscape nunca debería haberlo inventado).

Significa que no hará nada. Es un intento de que el enlace no 'navegue' a ningún lado. Pero no es la forma correcta.

En realidad, deberías solo return falseen el onclickevento, así:

<a href="#" onclick="return false;">hello</a>

Por lo general, se usa si el enlace está haciendo algo 'JavaScript-y'. Como publicar un formulario AJAX, o intercambiar una imagen, o lo que sea. En ese caso, simplemente realiza cualquier función que se llame return false.

Sin embargo, para hacer que su sitio web sea completamente increíble, generalmente incluirá un enlace que realiza la misma acción, si la persona que lo navega elige no ejecutar JavaScript.

<a href="backup_page_displaying_image.aspx"
   onclick="return coolImageDisplayFunction();">hello</a>

Hay una GRAN diferencia en el comportamiento de "#" vs javascript: void

"#" lo desplaza al inicio de la página mientras que "javascript: void (0);" no.

Esto es muy importante si está codificando páginas dinámicas. el usuario no quiere volver al principio solo porque hizo clic en un enlace de la página.

Es un método muy popular para agregar funciones de JavaScript a enlaces HTML.
Por ejemplo: los [Print]enlaces que ve en muchas páginas web se escriben así:

<a href="javascript:void(0)" onclick="callPrintFunction()">Print</a>

¿Por qué necesitamos hrefmientras onclicksolo podemos hacer el trabajo? Porque cuando los usuarios se ciernen sobre el texto 'Imprimir' cuando no hay href, el cursor cambiará a un cursor (ꕯ) en lugar de un puntero (👆). Solo tener hrefuna aetiqueta la valida como un hipervínculo.

Una alternativa a href="javascript:void(0);", es el uso de href="#". Esta alternativa no requiere que JavaScript esté activado en el navegador del usuario, por lo que es más compatible.

Siempre debe tener un href en sus unas etiquetas. Llamar a una función de JavaScript que devuelve 'indefinido' funcionará bien. También lo vinculará a '#'.

Las etiquetas de anclaje en Internet Explorer 6 sin href no a:hoveraplican el estilo.

Sí, es terrible y un delito menor contra la humanidad, pero también lo es Internet Explorer 6 en general.

Espero que esto ayude.

Internet Explorer 6 es en realidad un gran crimen contra la humanidad.

Vale la pena mencionar que a veces verás el vacío 0 cuando verifiques si no está definido, simplemente porque requiere menos caracteres.

Por ejemplo:

something === undefined

vs.

something === void 0

Algunos métodos de minificación reemplazan undefined con void 0 por este motivo.

El uso de javascript:void(0)significa que el autor del HTML está haciendo mal uso del elemento de anclaje en lugar del elemento del botón.

A menudo se abusa de las etiquetas de anclaje con el evento onclick para crear pseudo botones configurando href en "#" o "javascript: void (0)" para evitar que la página se actualice. Estos valores provocan un comportamiento inesperado al copiar / arrastrar enlaces, abrir enlaces en nuevas pestañas / ventanas, marcar como favoritos, y cuando JavaScript todavía se está descargando, se produce un error o está deshabilitado. Esto también transmite una semántica incorrecta a las tecnologías de asistencia (por ejemplo, lectores de pantalla). En estos casos, se recomienda utilizar en su <button>lugar. En general, solo debe usar un ancla para la navegación con una URL adecuada.

Fuente: Página de MDN<a> .

voides un operador que se utiliza para devolver un undefinedvalor, por lo que el navegador no podrá cargar una nueva página.

Los navegadores web intentarán tomar lo que se use como URL y cargarlo a menos que sea una función de JavaScript que devuelva nulo. Por ejemplo, si hacemos clic en un enlace como este:

<a href="javascript: alert('Hello World')">Click Me</a>

entonces aparecerá un mensaje de alerta sin cargar una nueva página, y eso es porque alertes una función que devuelve un valor nulo. Esto significa que cuando el navegador intenta cargar una nueva página, ve nulo y no tiene nada que cargar.

Una cosa importante a tener en cuenta sobre el operador vacío es que requiere un valor y no se puede usar solo. Deberíamos usarlo así:

<a href="javascript: void(0)">I am a useless link</a>

Para entender este concepto, primero se debe entender el operador vacío en JavaScript.

La sintaxis para el operador vacío es: void «expr»que evalúa expr y devuelve indefinido.

Si implementa void como una función, se ve de la siguiente manera:

function myVoid(expr) {
    return undefined;
}

Este operador vacío tiene un uso importante que es: descartar el resultado de una expresión.

En algunas situaciones, es importante volver indefinido en lugar del resultado de una expresión. Entonces void puede usarse para descartar ese resultado. Una de estas situaciones involucra javascript: URL, que deben evitarse para los enlaces, pero son útiles para los marcadores. Cuando visita una de esas URL, muchos navegadores reemplazan el documento actual con el resultado de evaluar el "contenido" de las URL, pero solo si el resultado no está indefinido. Por lo tanto, si desea abrir una nueva ventana sin cambiar el contenido que se muestra actualmente, puede hacer lo siguiente:

javascript:void window.open("http://example.com/")

El voidoperador evalúa la expresión dada y luego devuelve indefinido. Evita actualizar la página.

Los desarrolladores web usan javascript:void(0)porque es la forma más fácil de evitar el comportamiento predeterminado de la aetiqueta. void(*anything*)devuelve undefinedy es un valor falso. y devolver un valor falso es como return falseen el onclickcaso de una aetiqueta que impide su comportamiento predeterminado.

Así que creo que javascript:void(0)es la forma más sencilla de evitar el comportamiento predeterminado de la aetiqueta.

Un enlace debe tener un objetivo HREF que se especificará para permitir que sea un objeto de visualización utilizable.

La mayoría de los navegadores no analizarán JavaScript avanzado en un

<A HREF="" 

etiqueta como:

<A href="JavaScript:var elem = document.getElementById('foo');" 

debido a que la etiqueta HREF en la mayoría de los navegadores no permite espacios en blanco, o los convertirá en% 20, el equivalente HEX de un ESPACIO, lo que hace que su JavaScript sea absolutamente inútil para el intérprete.

Entonces, si desea usar una etiqueta A HREF para ejecutar JavaScript en línea, debe especificar un valor válido para HREF FIRST que no sea demasiado complejo (no contenga espacios en blanco), y luego proporcionar JavaScript en una etiqueta de atributo de evento como OnClick , OnMouseOver, OnMouseOut, etc.

La respuesta típica es hacer algo como esto:

<A HREF="#" onclick="var elem = document.getElementById('foo');">Get the object</a>

Esto funciona bien pero hace que la página salte a la parte superior debido a que el signo de libra / etiqueta hash le dice que lo haga.

Solo proporcionar un signo de libra / etiqueta hash en una etiqueta A HREF realmente especifica el ancla raíz, que siempre, de forma predeterminada, en la parte superior de la página, puede especificar una ubicación diferente al especificar el atributo NAME dentro de una etiqueta A HREF.

<A NAME='middleofpage'></A>

Luego puede cambiar su etiqueta A HREF para saltar a 'middleofpage' y ejecutar el JavaScript en el evento OnClick, una vez que suceda así:

<A HREF="#middleofpage" onclick="var elem = document.getElementById('foo');">Get the object</a>

Habrá MUCHAS veces en las que no desea que ese enlace salte, por lo que puede hacer dos cosas:

<A HREF="#thislinkname" name='thislinkname' onclick="var elem = document.getElementById('foo');">Get the object</a>

Ahora no irá a ningún lado cuando se haga clic, pero podría hacer que la página se vuelva a centrar desde su ventana gráfica actual. Esto no es lindo. ¿Cuál es la mejor manera de proporcionar JavaScript en línea, usando un HREF A, pero sin tener que hacer nada de lo anterior? JavaScript: nulo (0);

<A HREF="JavaScript:void(0);" onclick="var elem = document.getElementById('foo');">Get the object</a>

Esto le dice al navegador que NO VAYA AQUÍ, sino que ejecute el JavaScript válido: void (0); funciona primero en la etiqueta HREF porque no contiene espacios en blanco y no se analizará como una URL. En su lugar, será ejecutado por el compilador. VOID es una palabra clave que, cuando se suministra con un perameter de 0, devuelve UNDEFINED, que no utiliza más recursos para manejar un valor de retorno que ocurriría sin especificar el 0 (es más amigable con el manejo de la memoria / rendimiento).

Lo siguiente que sucede es que se ejecuta OnClick. La página no se mueve, no ocurre nada en la pantalla.

JavaScript: URL a un lado; Aquí es donde void puede ser útil para escribir código más corto.

var error1 = false,
    error2 = false,
    error3 = false;

function error1() {

  error1 = true;
}

function myFunction() {

  // You can easily return and call a function at once, if you don't care about myFunction's return value
  if (!someCondition1)
    return error1();

  // What if you want to set a value first?
  if (!someCondition2) {
    error2 = true;
    return
  }

  // Shortest way to return and set a value at once
  if (!someCondition3)
    return void(error3 = true);

  // More code goes here
}