O que significa " javascript: void (0)"?

Além da resposta técnica, {[[0]} significa que o autor está a fazer mal.

Não há uma boa razão para usar um javascript: pseudo-URL(*). Na prática, isso causará confusão ou erros se alguém tentar coisas como' bookmark link',' open link in a new tab', e assim por diante. Isso acontece bastante agora as pessoas se acostumaram a meio-Clique-para-novo-tab: parece um link, você quer lê - lo em um novo tab, mas acaba por não ser um link real em tudo, e dá resultados indesejados como uma página em branco ou um erro do JS quando clicado no meio.

<a href="#"> é uma alternativa comum que pode, sem dúvida, ser menos má. No entanto, deve lembrar-se de return false do seu onclick manipulador de eventos para evitar que a ligação seja seguida e se desloque para o topo da página.

Caso contrário, se um link aponta apenas para algum script, não é realmente um link e não deve ser marcado como tal. A abordagem habitual seria adicionar o onclick a um <span>, <div>, ou um <a> sem um href e estilo de alguma forma para deixar claro que você pode clicar nele. Isto é o que StackOverflow [fez no momento da escrita; agora ele usa href="#"].

A desvantagem disto é que você perde o controlo do teclado, uma vez que não consegue abarcar um span/div/bare-a ou activá-lo com espaço. Se esta é realmente uma desvantagem depende de que tipo de ação o elemento está destinado a tomar. Você pode, com algum esforço, tentar imitar a interactabilidade do teclado, adicionando um tabIndex ao elemento, e ouvindo por um teclado espacial. Mas nunca irá reproduzir a 100% o verdadeiro comportamento do navegador, até porque diferentes navegadores podem responder ao teclado de forma diferente (sem mencionar navegadores não-visuais).

Se realmente quiser um elemento que não seja uma ligação, mas que possa ser activado como normal pelo rato ou teclado, o que deseja é um <button type="button"> (ou <input type="button"> é igualmente bom, para um conteúdo textual simples). Você pode sempre usar CSS para refazê-lo para que ele se pareça mais com um link do que com um botão, Se você quiser. Mas como se comporta como um botão, é assim que se deve marcá-lo.

( * : no local pelo menos, autor. Obviamente, eles são úteis para os favoritos. javascript: pseudo-URLs são uma bizarria conceitual: um localizador que não aponta para uma localização, mas em vez disso chama código ativo dentro da localização atual. Eles causaram enormes problemas de segurança para navegadores e webapps, e nunca deveriam ter sido inventados pela Netscape.)

Você deve realmente return false no evento onclick, assim:

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

Normalmente é usado se o link estiver a fazer alguma coisa 'JavaScript-y'. Como afixar um formulário AJAX, ou trocar uma imagem, ou o que quer que seja. Nesse caso, você apenas faz qualquer função que está sendo chamada de retorno false.

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

Existe uma enorme diferença no comportamento de " # " vs javascript: void

"#" scrolls you to the TOP of the page enquanto " javascript: void (0);" não.

Isto é muito importante se estiver a codificar páginas dinâmicas. o Usuário não quer voltar para o topo só porque ele clicou um link na página.

É usado muito popularmente para adicionar funções JavaScript à ligação HTML, por exemplo: a ligação [Print] que você vê em muitas páginas web. O código é como:

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

PS: existem dois métodos: 1. href="javascript:void(0);" e 2. - Ambos têm o o mesmo efeito. Mas o primeiro requer JavaScript para ser ligado no navegador web, enquanto o segundo não. Então o segundo parece ser mais compatível.

Deve ter sempre um href nas suas etiquetas a. Chamar uma função de JavaScript que retorna 'indefinido' fará muito bem. Assim como a ligação a'#'.

As marcas de fixação no Internet Explorer 6 sem um href não conseguem aplicar o estilo {[[0]}.

void é um operador que é usado para devolver um valor undefined de modo que o navegador não será capaz de carregar uma nova página.

Os navegadores da Web tentarão usar o que for usado como URL e carregá-lo, a menos que seja uma função JavaScript que retorne nulo. Por exemplo, se clicarmos num link como este:

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

Então uma mensagem de Alerta irá aparecer sem carregar uma nova página, e isso porque alert é uma função que devolve um valor nulo. Isto significa que quando o navegador tenta carregar um nova página ele vê nulo e não tem nada para carregar.

Uma coisa importante a notar sobre o operador vazio é que ele requer um valor e não pode ser usado por si mesmo. Devemos usá - lo assim:

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

O operador void avalia a expressão indicada e depois devolve indefinido. Evita refrescar a página.

Por exemplo:

something === undefined

Vs.

something === void 0

Alguns métodos de minificação substituem o indefinido pelo vazio 0 por esta razão.

O uso de javascript:void(0) significa que o autor do HTML está a usar mal o elemento âncora no lugar do elemento botão.

As marcas de fixação são frequentemente abusadas com o evento onclick para criar pseudo-botões ao configurar o href para " # "ou" javascript: void (0) " para evite que a página seja refrescante. Estes valores causam imprevistos comportamento ao copiar / arrastar as ligações, abrindo as ligações num novo páginas / janelas, bookmarking e quando o JavaScript ainda está a transferir, erros apagados, ou é desactivado. Isso também transmite semântica incorreta para tecnologias de assistência (por exemplo, leitores de tela). Nestes casos, é recomenda-se a utilização de um <button> em alternativa. Em geral, deve apenas utilizar uma âncora para navegação usando uma URL adequada.

Fonte: MDN's<a> Page .

Para compreender este conceito deve-se primeiro compreender o operador vazio em JavaScript.

A sintaxe para o operador vazio é: void «expr» que avalia o expr e retorna indefinido.

Se implementares o vazio como uma função, parece o seguinte:

function myVoid(expr) {
    return undefined;
}

Este operador vazio tem um uso importante que é-descartar o resultado de uma expressão.

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

Uma ligação deve ter um alvo HREF a ser especificado para permitir que seja um objecto de visualização utilizável.

A maioria dos navegadores não processará JavaScript avançado num

<A HREF="" 

Etiqueta como:

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

Porque a marca HREF na maioria dos navegadores não permite espaços em branco, ou irá converter espaços em branco para %20, o equipamento HEX de um espaço, o que torna o seu JavaScript absolutamente inútil para o interpretador.

Por isso, se quiser usar uma marca HREF para executar JavaScript incorporado, você deve especificar um valor válido para o HREF primeiro que não seja muito complexo (não contém espaços em branco), e então fornecer o JavaScript em um atributo de evento como OnClick, OnMouseOver, OnMouseOut, etc.

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

Isto funciona bem, mas faz a página Saltar para o topo por causa do sinal de Libra/hash tag diz-lhe para o fazer.

Só fornecer um sinal de Libra / hash numa marca HREF especifica a âncora raiz, que é: sempre, por padrão, o topo da página, você pode especificar uma localização diferente, usando a especificação do atributo Nome dentro de uma tag HREF.

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

Você pode então mudar a sua marca HREF para saltar para 'middleofpage' e executar o JavaScript no evento OnClick, uma vez que isso acontece assim:

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

Haverá muitas vezes em que você não quer que o link pule ao redor, para que você possa fazer duas coisas:

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

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

Isto diz ao navegador para não ir a lado nenhum, mas em vez disso executa a função JavaScript válida:void(0); em primeiro lugar na marca HREF, porque não contém espaços em branco, e não será processada como um URL. Em vez disso, será executado pelo compilador. VOID é uma palavra-chave que, quando fornecida com um perameter de 0 retorna indefinido, que não usa mais recursos para lidar com um valor de retorno que ocorreria sem especificar o 0 (é mais de gestão de memória/desempenho amigável).

JavaScript: URLs à parte; é aqui que o void pode ser útil para escrever um código mais curto.

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
}

Os programadores Web usam javascript:void(0) porque é a maneira mais fácil de prevenir o comportamento por omissão da marca a. void(*anything*) devolve undefined e é um valor falso. e devolver um valor falso é como return false em onclick evento de a tag que impede o seu comportamento padrão.

Então eu acho que {[[0]} é a maneira mais simples de prevenir o comportamento padrão de a tag.

Outro exemplo de Utilização javascript.void(0) . Não sei se é o caminho certo, mas faz o trabalho.

$(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>