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

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

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

Dios mio
fuente
12
javascript:es uno de los muchos esquemas de URI: en.wikipedia.org/wiki/URI_scheme , como data:.
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
3
Puedes usar solo href="javascript:"para el mismo propósito. Como se indicó en la respuesta a esta pregunta , la void(0)parte estaba originalmente destinada a versiones anteriores de navegadores donde el javascript:manejo de URI era diferente. Pero ahora ni siquiera podía encontrar una versión donde la taquigrafía no funcionara, al menos IE7 maneja esto correctamente.
usuario
1
También he visto href = "javascript: //", ¿es esto mejor?
sable de luz
href = "javascript: //" no funciona para mí void (0) funciona perfectamente.
sandip

Respuestas:

1041

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.

rahul
fuente
99
¿Qué significa cuando href recibe un "valor primitivo indefinido"?
omg
77
"normalmente un javascript: url redirigirá el navegador a una versión de texto sin formato del resultado de evaluar ese javascript". ¿Puede dar un ejemplo aquí? Nunca he visto ese uso.
omg
87
Un ejemplo de lo que Phoenix está hablando es <a href="javascript: dosomething();"> ¡HAZLO AHORA! </a>. Si dosomething devuelve false, entonces hacer clic en el enlace simplemente hará que el navegador salga de la página y muestre "false". Sin embargo ... <a href="javascript: dosomething(); void(0)"> ¡HAZLO AHORA! </a> evita el problema. Siga adelante y pegue javascript: 1 + 1; en la barra de direcciones de su navegador. El navegador debería mostrar "2"
Breton
99
Porque void es un operador unario. El vacío no es un valor, ni es una función. Necesita un valor para operar a su derecha, o arrojará un error.
Breton
14
intente buscar en la consola de error? Definitivamente arroja un error de sintaxis. Es JavaScript no válido. Douglas Crockford recomienda mantenerse alejado del vacío debido a que la confusión del operador / función / valor unario es demasiado costosa de manejar.
Breton
436

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

bobince
fuente
77
Además de la excelente publicación de @bobince: hace un par de meses he investigado un poco sobre la navegabilidad del teclado entre navegadores de hrefs, incluidas las peculiaridades y los efectos secundarios; algunos de ustedes pueden encontrarlo útil: jakub-g.github.com/accessibility/onclick
jakub.g
2
@ThinkBonobo: ¡SO ha cambiado en algún momento desde 2009! Actualizado.
bobince
59
Esta es una opinión y no responde la pregunta. void(0)es necesario en muchos casos; "#" es un truco que trae consigo una gran cantidad de problemas (no funcionaría en la aplicación que estoy escribiendo, eso me llevó a esta página).
Felwithe
12
Estoy de acuerdo con @feltwithe. ¿Por qué obligar a otros a "hacerlo de una manera particular"? En 15 años de programación, todavía tengo que ver cómo el lema "siempre debe hacerse de esta manera" no lleva a las personas a un desastre hecho por ellos mismos
Steven de Salas
44
El uso de fragment-id es una mala idea desde una perspectiva UX, ya que hace que el documento salte a la parte superior de la página a menos que preventDefaultse use. No lo haga en el caso de que se utilice un ancla como botón en un formulario.
Josh Habdas
124

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>
Seda del mediodía
fuente
33
no no - retorno falsa detendrá el comportamiento por defecto, por lo que nunca aparecerá el #
Magnar
22
el protocolo javascript: url es un estándar de facto, no un estándar real. Entonces href = "#" onclick = "return false;" cumple con los estándares, mientras que href = "javascript: void (0)" no, porque no existe un estándar oficial que especifique qué debe hacer.
Breton
10
Además de eso, a Douglas Crockford no le gusta el vacío, por lo que jslint se quejará al respecto. Básicamente, dado que void es un operador, y no un valor, es confuso como el infierno y genera muchas preguntas como esta. Es mejor evitarlo por completo. jaja.
Breton
44
Brandon: ver las respuestas de brenton. La forma en que lo recomiendo es la más compatible y, como dije en la segunda parte de mi publicación, en un sitio "adecuado" ni siquiera usarás '#', porque estarás proporcionando sistemas de respaldo para manejar la falta de javascript
Mediodía Seda
19
+1 por incluir el ejemplo completamente asombroso . Incluso si no tiene un respaldo HTML estático para lo que está haciendo en JavaScript, siempre puede hacer algo como eso <a href="enableJavaScriptToSeeMyCompletelyAwesomeSite.html" onclick="completelyAwesome();return false;">.
Grant Wagner
73

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.

Salvin Francis
fuente
26
@Salvin: el comportamiento de desplazamiento hacia la parte superior de la página se puede suprimir volviendo falseal controlador de eventos: onclick="doSomething();return false;"o si se doSomething()devuelve false, puede usarlo onclick="return doSomething();".
Grant Wagner
41
@GrantWagner - O, 5 años más tarde, e.preventDefault().
trysis
1
Es posible que desee editar / eliminar esta respuesta, ya "#"que no se desplaza hacia la parte superior cuando devuelve falso.
Navin
44
@Navin, tienes razón, pero ahora es una práctica obsoleta. El comentario de trysis se considera la forma correcta ahora.
Tim Seguine
66

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.

Huy - Vuong Do Thanh
fuente
77
tampoco hace nada útil si javascript está desactivado.
Jasen
12
No necesita hrefobtener el cursor de la mano señaladora; todo lo que se necesita es un poco de CSS.
John Montgomery
1
¿Por qué no pondrías la función JavaScript en href en lugar de onclick?
Siddhartha Gandhi
2
Estoy de acuerdo con @Sid: si lo está utilizando para activar una función de JavaScript, entonces <a href="javascript:callPrintFunction()">es más limpio (aunque probablemente debería ser un buttonlugar en lugar de un anchor si en realidad no lo lleva a ninguna parte).
DaveMongoose
href="#"puede llevar a sorpresas desagradables, como solicitudes xhr abortadas, que se llaman con un clic en ese enlace. Recientemente tuve dificultades para depurar un sitio web que canceló el inicio de sesión oidc solicitado, si el usuario se encontraba en una dirección que no era la raíz del sitio. #href hizo que volviera a cargar la dirección antes de que se completara la solicitud xhr.
JustAMartin
44

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.

jscharf
fuente
25

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.

Chubasco
fuente
10
Un ejemplo notable es TypeScript ( ejemplo en vivo ), que compila valores de parámetros predeterminados para compararlos void 0. La diferencia de 3 caracteres se suma rápidamente cuando muchos métodos utilizan valores de parámetros predeterminados.
John Weisz
1
"Algunos métodos de minificación reemplazan undefined con void 0 por este motivo". Finalmente lo entiendo! Gracias @squall por la respuesta completa.
Ahmed Mahmoud
22

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

Ronnie Royston
fuente
44
+1 para mostrar html semántico en una pregunta anterior ... Los enlaces van a lugares, los botones hacen cosas; si no queremos que parezca un botón, deberíamos borrar el estilo.
kevlarr
La gran excepción a esto serían los mapas de imágenes, que pueden necesitar ejecutar JavaScript; y como no es un botón, es un enlace que tiene límites poligonales, esta es la "única" forma.
17

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>
Amr
fuente
1
He visto a personas usar javascript: nulo en lugar de nulo ... pero eso es un problema. Chrome null funciona, en Firefox, intenta cargar la página nula. Me alegro de que hayas actualizado. Interesante error.
Gavin Pickin
Encontré otros usos en una base de código como javascript: null pero con javascript: null () que no está definido, por lo que funciona.
Gavin Pickin
1
Entonces, ¿básicamente es como jquery's prevendDefault y return false?
Robert Rocha
16

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/")
Gopal Yadav
fuente
2
¡Gracias por aclarar exactamente para qué sirve el argumento de 'vacío'! No estaba claro en las otras respuestas, solo que "el vacío toma una discusión".
dbeachy1
Buena respuesta pero un detalle, la implementación nula será algo como: function myVoid(expr) { expr(); return undefined; } Olvidó agregar expr ();
Juanma Menéndez
1
@Juanma Menéndez: no es cierto. exprya se evalúa cuando se myVoid()llama (el resultado de esa expresión se pasa como parámetro)
Udo G
@ UdoG Tengo curiosidad, ¿cómo sabes que los hombres? Puede usted explicar por favor.
Juanma Menéndez
@JuanmaMenendez: las expresiones en los parámetros de las funciones siempre se evalúan antes de llamar a la función en sí. Lo siento, no tengo ningún documento a mano que lo aclare, pero pruébalo: function() { alert("foo"); }es una expresión válida . void(function() { alert("foo"); })regresa undefinedy no muestra la alerta, mientras que myVoid(function() { alert("foo"); })sí (en su versión, no la de Gopal Yadav ).
Udo G
14

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

Abhay Singh
fuente
9

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.

Mohamad Shiralizadeh
fuente
8

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.


fuente
+1 para explicar todas las diferentes formas en que se podría manejar un ancla como esta . Sin embargo, soy de la opinión de que un <a>elemento siempre debe ir a alguna parte ; si solo está en la página para ejecutar javascript, entonces se <button>debe usar a en su lugar. Usar <button>es a la vez más semántico y te ahorra todo este debate sobre qué hackear en un ancla href. Editar: parece que la respuesta de @Ronnie Royston a continuación ya tiene cubierto este argumento.
Rabadash8820
1

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
}
Maciej Krawczyk
fuente
Sería bueno si los votantes negativos pudieran al menos decir por qué votaron negativamente. Sé que no es el tema de la pregunta, pero estoy pensando en todas las personas que vienen aquí de los resultados de búsqueda.
Maciej Krawczyk