javascript - que - onclick void 0

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

Question

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

He visto muchas veces muchas veces, pero no sé qué significa exactamente eso.

Answer 1

El operador void evalúa la expresión dada y luego devuelve undefined .

El operador void menudo se usa simplemente para obtener el valor primitivo undefined , usualmente 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).

Una explicación se proporciona aquí: operador de void .

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

Answer 2

Además de la respuesta técnica, javascript:void significa que el autor está Doing It Wrong.

No hay una buena razón para usar un javascript: pseudo-URL (*). En la práctica, causará confusión o errores en caso de que alguien intente cosas como ''enlace de marcador'', ''enlace abierto en una nueva pestaña'', etc. Esto sucede bastante ahora. La gente se ha acostumbrado a hacer clic con el botón central para obtener una nueva pestaña: parece un enlace, debes leerlo en una nueva pestaña, pero 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 ser menos mala. Sin embargo, debe recordar return false desde su controlador de eventos onclick 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 al que apuntar el enlace. Por ejemplo, si tiene un control sobre el que puede hacer clic para abrir un <div id="foo"> previamente oculto, tiene sentido usar <a href="#foo"> para vincularlo. O si hay una forma no de JavaScript de hacer lo mismo (por ejemplo, ''thispage.php? Show = foo'' que hace que foo sea 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 ser marcado como tal. El enfoque habitual sería agregar el onclick en un <span> , <div> o un <a> sin un href y href de alguna manera para que quede claro, puede hacer clic en él. Esto es lo que hizo [al momento de escribir; ahora usa href="#" ].

La desventaja de esto es que se pierde el control del teclado, ya que no se puede colocar en un span / div / bare-a o activarlo con espacio. El hecho de que esto sea realmente una desventaja depende de qué tipo de acción pretende realizar el elemento. Puede, con un poco de esfuerzo, intentar imitar la interactividad del teclado agregando un tabIndex de tabIndex al elemento y escuchando la pulsación de la tecla Espacio. Pero nunca reproducirá al 100% el comportamiento real del navegador, entre otras cosas porque los diferentes navegadores pueden responder al teclado de manera diferente (sin mencionar los navegadores no visuales).

Si realmente desea un elemento que no es un enlace pero que puede activarse normalmente con el mouse o el teclado, lo que desea es un <button type="button"> (o <input type="button"> es igual a bueno, para contenidos textuales simples). Siempre puedes usar CSS para cambiar el estilo de forma que se vea más como un enlace que como un botón, si lo deseas. Pero como se comporta como un botón, así es como realmente debes marcarlo.

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

Answer 3

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

Answer 4

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

Las etiquetas de anclaje a menudo se abusan 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 marcadores y cuando JavaScript todavía se está descargando, hay errores o está deshabilitado. Esto también transmite una semántica incorrecta a las tecnologías de asistencia (por ejemplo, los lectores de pantalla). En estos casos, se recomienda utilizar un <button> lugar. En general, solo debe usar un ancla para la navegación con una URL adecuada.

Fuente: Página <a> de MDN .

Answer 5

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

"#" te desplaza al TOP de la página mientras "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 en la página.

Answer 6

JavaScript: URLs aparte; aquí es donde el vacío 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
}

Answer 7

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

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

Answer 8

Otro ejemplo donde se utiliza javascript.void(0) . No estoy seguro de si es la forma 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>

Answer 9

Para entender este concepto, primero se debe entender el operador vacío 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, tiene el siguiente aspecto:

function myVoid(expr) {
    return undefined;
}

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

En algunas situaciones, es importante devolver no definido en lugar del resultado de una expresión. Luego se puede usar el vacío para descartar ese resultado. Una de esas 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á definido. 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/")

Answer 10

Se usa muy popularmente para agregar funciones de 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 puede hacer el trabajo? Porque si omitimos ''href'' , cuando los usuarios pasen el mouse sobre el texto "Imprimir", el cursor cambiará a "I". Tener ''href'' permite que el cursor se muestre como si fuera un hipervínculo: una mano que apunta.

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

Answer 11

Siempre debes tener un href en tus etiquetas. Llamar a una función de JavaScript que devuelve ''indefinido'' funcionará bien. Así lo hará vincular a ''#''.

Las etiquetas de anclaje en Internet Explorer 6 sin un href no tienen el estilo a 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.

Answer 12

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 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 hace que cualquier función que se está llamando devuelva false .

Sin embargo, para hacer que su sitio web sea completamente impresionante, 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>

Answer 13

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

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

<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á espacios en blanco a% 20, el equivalente en HEX de un ESPACIO, 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 contiene espacios en blanco), y luego debe 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 a que la etiqueta de signo de libra / hash le indica que lo haga.

El solo hecho de proporcionar una etiqueta de signo / hash en una etiqueta A HREF en realidad especifica el ancla raíz, que siempre es, por defecto, 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 quieras que el enlace salte, así 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 en él, pero podría hacer que la página se vuelva a centrar desde su vista actual. Esto no es bonito. ¿Cuál es la mejor manera de proporcionar javascript en línea, utilizando un A 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 vaya a AHORA, pero en su lugar 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 parámetro de 0, devuelve UNDEFINED, que no utiliza más recursos para manejar un valor de retorno que se produciría sin especificar el 0 (es más compatible con la administración de memoria / rendimiento).

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

Answer 14

Vale la pena mencionar que a veces verá un 0 vacío al verificar si no está definido, simplemente porque requiere menos caracteres.

Por ejemplo:

something === undefined

contra

something === void 0

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

Answer 15

void es un operador que se utiliza para devolver un valor undefined , por lo que el navegador no podrá cargar una página nueva.

Los navegadores web intentarán tomar todo 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>

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

Una cosa importante a tener en cuenta sobre el operador de vacío 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>