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

Además de la respuesta técnica, javascript:void significa que el autor lo Está Haciendo Mal.

No hay una buena razón para usar una pseudo-URL javascript: (*). En la práctica, causará confusión o errores si alguien intenta cosas como 'enlace de marcador', 'abrir enlace en una nueva pestaña', y así sucesivamente. Esto sucede bastante ahora que la gente se ha acostumbrado a hacer clic en el botón central para 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 da resultados no deseados como una página en blanco o un error JS al hacer clic en el medio.

<a href="#"> es una alternativa común que podría ser menos malo. Sin embargo, debe recordar return false desde su controlador de eventos onclick para evitar que el enlace se siga y se desplace hasta la parte superior de la página.

En algunos casos puede haber un lugar útil para apuntar el enlace. Por ejemplo, si tiene un control en el que puede hacer clic que abre un <div id="foo"> previamente oculto, tiene algún sentido usar <a href="#foo"> para vincularlo. O si hay una forma no JavaScript de hacer lo mismo (por ejemplo, 'esta página.php?show = foo ' que establece foo visible para empezar), puedes enlazar 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 añadir el onclick a un <span>, <div>, o un <a> sin un href y estilo de alguna manera para que quede claro que puede hacer clic en él. Esto es lo que StackOverflow [hizo en el momento de escribir; ahora se 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 interactividad del teclado agregando un tabIndex al elemento, y escuchando una tecla de Espacio. Pero nunca va a reproducir al 100% el comportamiento real del navegador, sobre todo porque diferentes navegadores pueden responder al teclado de manera diferente (por no mencionar los navegadores no visuales).

Si realmente quieres un elemento que no sea un enlace pero que se pueda activar 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 rediseñarlo para que parezca más un enlace que un botón, si quieres. Pero como se comporta como un botón, así es como realmente debes marcarlo.

( * : en el sitio autor, de todos modos. Obviamente son útiles para bookmarklets. javascript: las pseudo-URLs son una rareza conceptual: un localizador que no apunta a una ubicación, sino que llama al código activo dentro de la ubicación actual. Han causado problemas de seguridad masivos tanto para navegadores como para aplicaciones web, y nunca deberían haber sido inventados por Netscape.)

Significa que no hará nada. Es un intento de que el enlace no' navegue ' en ninguna parte. Pero no es el camino correcto.

En realidad deberías simplemente return false en el evento onclick, así:

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

Normalmente 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 haga que la función que se llama return false.

Para hacer que su sitio web sea completamente impresionante, sin embargo, generalmente incluya un enlace que haga 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>

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

" # " te desplaza a la PARTE SUPERIOR de la página mientras que " javascript: void (0);" no lo hace.

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.

Se usa muy popularmente para agregar funciones JavaScript al enlace HTML, por ejemplo: el enlace [Print] que se ve en muchas páginas web. El código es como:

<a href="javascript:void(0)" onclick="call print function">Print</a>

¿Por qué necesitamos 'href' mientras que 'onclick' solo podemos hacer el trabajo? Porque si omitimos el 'href', cuando los usuarios pasen el ratón sobre el texto "Print" el cursor cambiará a "I". Tener 'href' permitir que el cursor se muestre como si fuera un hipervínculo: una mano apuntando.

PS: Hay dos métodos: 1. href="javascript:void(0);" y 2. href="#" - ambos tienen lo mismo efecto. Pero el 1er requiere JavaScript para ser activado en el navegador web, mientras que el segundo no lo hace. Así que el segundo parece ser más compatible.

Siempre debe tener un href en sus etiquetas a. Llamar a una función JavaScript que devuelve 'undefined' hará muy bien. También lo hará el enlace a'#'.

Las etiquetas de anclaje en Internet Explorer 6 sin un href no obtienen el estilo a:hover aplicado.

Sí, es terrible y un crimen 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.

void es un operador que se utiliza para devolver un valor undefined para que el navegador no pueda 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 JavaScript que devuelva null. 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 alert es una función que devuelve un valor null. Esto significa que cuando el navegador intenta cargar un nuevo página que ve null y no tiene nada que cargar.

Una cosa importante a tener en cuenta sobre el operador void es que requiere un valor y no puede ser utilizado por sí mismo. Deberíamos usarlo así:

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

El operador void evalúa la expresión dada y luego devuelve undefined. Evita actualizar la página.

Vale la pena mencionar que a veces verá void 0 cuando verifique undefined, 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 esta razón.

El uso de javascript:void(0) significa que el autor del HTML está haciendo un mal uso del elemento anchor en lugar del elemento button.

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

Fuente: Página de MDN<a> .

Para entender este concepto uno debe entender primero el operador void en JavaScript.

La sintaxis para el operador void es: void «expr» que evalúa expr y devuelve undefined.

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

function myVoid(expr) {
    return undefined;
}

Este operador void tiene un uso importante que es - descartar el resultado de una expresión.

En algunas situaciones, es importante devolver undefined en lugar del resultado de una expresión. Entonces void puede utilizar para descartar ese resultado. Una de estas situaciones implica javascript: URLs, que deben evitarse para los enlaces, pero son útiles para bookmarklets. Cuando visita una de esas URL, muchos navegadores reemplazan el documento actual con el resultado de evaluar las URL "contenido", 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/")

Un enlace debe tener un objetivo HREF que se especifique 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 convertirá los espacios en blanco a %20, el hexadecimal de un ESPACIO, lo que hace que su JavaScript sea absolutamente inútil para el intérprete.

Entonces, si desea usar una etiqueta HREF para ejecutar JavaScript en línea, debe primero debe especificar un valor válido para HREF que no sea demasiado complejo (no contenga espacios en blanco), y luego proporcionar el 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 al signo de libra/etiqueta hash que le dice que lo haga.

Simplemente proporcionando un signo de libra/etiqueta hash en una etiqueta HREF en realidad especifica el ancla raíz, que es siempre, de forma predeterminada en la parte superior de la página, puede especificar una ubicación diferente mediante la especificación del atributo NAME dentro de una etiqueta 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 esto suceda de la siguiente manera:

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

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

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

Ahora no irá a ninguna parte cuando se haga clic, pero podría causar que la página vuelve a centrarte desde su ventana actual. Esto no es bonito. ¿Cuál es la mejor manera de proporcionar javascript en línea, utilizando un HREF, pero sin tener que hacer nada de lo anterior? JavaScript:void(0);

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

Esto le dice al navegador que no vaya A NINGUNA PARTE, sino que ejecute la función válida JavaScript:void(0); 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 perámetro of 0 devuelve UNDEFINED, que no usa más recursos para manejar un valor devuelto que ocurriría sin especificar el 0 (es más amigable con la administración de memoria/rendimiento).

Lo siguiente que sucede es que el OnClick se ejecuta. La página no se mueve, nada sucede en cuanto a visualización.

JavaScript: URLs aparte; 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
}

Los desarrolladores web usan javascript:void(0) porque es la forma más fácil de evitar el comportamiento predeterminado de la etiqueta a. void(*anything*) devuelve undefined y es un valor falsy. y devolver un valor falso es como return false en el evento onclick de la etiqueta a que evitan su comportamiento predeterminado.

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

Otro ejemplo donde se usa javascript.void(0). No estoy seguro de si es la manera correcta, pero hace el trabajo

$(document).ready(function() {
  jQuery(".show-hide-detail").hide();
  jQuery(".show-hide-detail:first").show();
  jQuery(".show-hide-btn a").click(function() {
    var thid_data = jQuery(this).attr('data-id');
    jQuery(".show-hide-btn a").removeClass('active');
    jQuery(this).addClass('active');
    if (!jQuery("#" + thid_data).is(":visible")) {
      jQuery(".show-hide-detail").hide();
      jQuery("#" + thid_data).show();
    }
  });
});

<section>
  <div class="features">
    <div class="container">
      <h1>Room Dimensions</h1>
      <p class="description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor arcu non ligula convallis, vel tincidunt ipsum posuere.sollicitudin. Duis iaculis, arcu ut hendrerit pharetra, elit augue pulvinar magna
      </p>
      <div class="dimension-btn show-hide-btn">
        <a class="active" data-id="LivingRoom">Living Room</a>
        <a href="javascript:void(0)" data-id="DiningRoom">Dining Room</a>
        <a href="javascript:void(0)" data-id="Kitchen">Kitchen</a>
        <a href="javascript:void(0)" data-id="MasterBedroom">Master Bedroom</a>
        <a href="javascript:void(0)" data-id="Bedroom2">Bedroom 2</a>
        <a href="javascript:void(0)" data-id="Bedroom3">Bedroom 3</a>
        <a href="javascript:void(0)" data-id="Bathroom">Bathroom</a>
        <a href="javascript:void(0)" data-id="Gym">Gym</a>
        <a href="javascript:void(0)" data-id="SwimmingPool">Swimming Pool</a>
      </div>
      <div class="row">
        <div class="LivingRoom Dimension-detail show-hide-detail" id="LivingRoom" style="display: block;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="DiningRoom" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="Kitchen" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="MasterBedroom" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="Bedroom2" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="Bedroom3" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="Bathroom" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="SwimmingPool" style="display: none;"></div>
        </div>
      </div>
    </div>



</section>