¿Qué significa "javascript:void(0)"?
<a href="javascript:void(0)" id="loginlink">login</a>
He visto mensajes así href
muchas veces, pero no sé qué significa exactamente.
El
void
operador evalúa la expresión dada y luego devuelveundefined
.El
void
operador se utiliza a menudo simplemente para obtener elundefined
valor primitivo, normalmente utilizando "void(0)
" (que equivale a "void 0
").undefined
En estos casos, se puede utilizar la variable global (suponiendo que no se haya asignado a un valor no predeterminado).
Aquí se proporciona una explicación: void
operador .
La razón por la que querrías hacer esto con href
un enlace es que normalmente, una javascript:
URL redireccionará el navegador a una versión de texto plano del resultado de evaluar ese JavaScript. Pero si el resultado es undefined
, entonces el navegador permanece en la misma página. void(0)
es solo un script breve y simple que se evalúa como undefined
.
Además de la respuesta técnica, javascript:void
significa que el autor lo está haciendo mal.
No hay ninguna buena razón para utilizar una javascript:
pseudo-URL (*). En la práctica, causará confusión o errores si alguien intenta cosas como "enlace a marcador", "abrir enlace en una pestaña nueva", etc. Esto sucede bastante ahora que la gente se ha acostumbrado a hacer clic con el botón central para abrir una nueva pestaña: parece un enlace, quieres leerlo en una nueva pestaña, pero resulta que no es un enlace real en absoluto. y proporciona resultados no deseados como una página en blanco o un error JS al hacer clic con el botón central.
<a href="#">
es una alternativa común que podría decirse que es menos mala. Sin embargo, debe recordarlo return false
desde su onclick
controlador de eventos para evitar que se siga el enlace y se desplace hasta la parte superior de la página.
En algunos casos, puede haber un lugar realmente útil al que señalar el enlace. Por ejemplo, si tiene un control en el que puede hacer clic y que abre un archivo 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 hace que foo sea visible para empezar), puedes vincularlo.
De lo contrario, si un enlace apunta sólo a algún script, no es realmente un enlace y no debe marcarse como tal. El enfoque habitual sería agregarlo onclick
a <span>
, <div>
o <a>
sin href
y darle un estilo de alguna manera para que quede claro que puede hacer clic en él. Esto es lo que StackOverflow [hizo al momento de escribir este artículo; ahora usa href="#"
].
La desventaja de esto es que pierdes el control del teclado, ya que no puedes tabular un span/div/bare-a o activarlo con un espacio. Que esto sea realmente una desventaja depende del tipo de acción que se pretende realizar con el elemento. Puede, con un poco de esfuerzo, intentar imitar la interactividad del teclado agregando un tabIndex
al elemento y escuchando si se presiona la tecla Espacio. Pero nunca reproducirá al 100% el comportamiento real del navegador, sobre todo porque diferentes navegadores pueden responder al teclado de manera diferente (sin mencionar los navegadores no visuales).
Si realmente quieres un elemento que no sea un enlace pero que pueda activarse normalmente con el ratón o el teclado, lo que quieres es un <button type="button">
(o <input type="button">
es igual de bueno, para contenidos textuales simples). Siempre puedes usar CSS para cambiarle el estilo para que se parezca más a un enlace que a un botón, si lo deseas. Pero como se comporta como un botón, así es como realmente debes marcarlo.
(*: en la creación de sitios, de todos modos. Obviamente, son útiles para los marcadores. javascript:
Las pseudo-URL son una rareza 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 tanto para los navegadores como para las aplicaciones web, y Netscape nunca debería haberlo inventado).
Significa que no hará nada. Es un intento de que el enlace no "navegue" a ninguna parte. Pero no es el camino correcto.
En realidad, deberías hacerlo return false
en el onclick
evento, así:
<a href="#" onclick="return false;">hello</a>
Por lo general, se usa si el enlace hace alguna cosa 'JavaScript-y'. Como publicar un formulario AJAX, intercambiar una imagen o lo que sea. En ese caso, simplemente haga que cualquier función que se llame regrese false
.
Sin embargo, para que su sitio web sea completamente increíble, generalmente incluirá un enlace que realice la misma acción, si la persona que navega elige no ejecutar JavaScript.
<a href="backup_page_displaying_image.aspx"
onclick="return coolImageDisplayFunction();">hello</a>