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

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

Já vi hreftantas vezes, mas não sei exatamente o que isso significa.

O voidoperador avalia a expressão fornecida e, em seguida, retorna undefined.

O voidoperador geralmente é usado apenas para obter o undefinedvalor primitivo, geralmente usando “ void(0)” (que é equivalente a “ void 0”). Nesses casos, a variável global undefined pode ser usada (assumindo que não foi atribuída a um valor não padrão).

Uma explicação é fornecida aqui: voidoperator .

O motivo pelo qual você deseja fazer isso com o hreflink é que, normalmente, um javascript:URL redireciona o navegador para uma versão em texto sem formatação do resultado da avaliação desse JavaScript. Mas se o resultado for undefined, então o navegador permanecerá na mesma página. void(0)é apenas um script curto e simples que avalia undefined.

Além da resposta técnica, javascript:voidsignifica que o autor está fazendo errado.

Não há um bom motivo para usar uma javascript:pseudo-URL (*). Na prática, causará confusão ou erros, se alguém tentar coisas como 'link de marcador', 'abrir link em uma nova guia' e assim por diante. Isso acontece bastante agora que as pessoas se acostumaram a clicar no meio para uma nova guia: parece um link, você deseja lê-lo em uma nova guia, mas acaba não sendo um link real, e fornece resultados indesejados, como uma página em branco ou um erro de JS, quando clicamos no meio.

<a href="#">é uma alternativa comum que pode ser menos ruim. No entanto, você deve se lembrar return falsedo onclickmanipulador de eventos para impedir que o link seja seguido e role até o topo da página.

Em alguns casos, pode haver um local realmente útil para apontar o link. Por exemplo, se você tem um controle no qual pode clicar e abrir um objeto oculto anteriormente <div id="foo">, faz algum sentido usar o <a href="#foo">link para ele. Ou, se houver uma maneira não JavaScript de fazer a mesma coisa (por exemplo, 'thispage.php? Show = foo' que define foo visível para começar), você pode vincular a isso.

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

A desvantagem disso é que você perde o controle do teclado, pois não pode tabular em um span / div / bare-a ou ativá-lo com espaço. Se isso é realmente uma desvantagem depende de que tipo de ação o elemento pretende executar. Você pode, com algum esforço, tentar imitar a interatividade do teclado adicionando um tabIndexao elemento e ouvindo um pressionamento de tecla Espaço. Mas nunca reproduzirá 100% o comportamento real do navegador, até porque navegadores diferentes podem responder de maneira diferente ao teclado (para não mencionar navegadores não visuais).

Se você realmente deseja um elemento que não é um link, mas que pode ser ativado normalmente pelo mouse ou teclado, o que você quer é um <button type="button">(ou <input type="button">é igualmente bom, para conteúdo textual simples). Você sempre pode usar CSS para modificá-lo, para que pareça mais um link do que um botão, se desejar. Mas, como se comporta como um botão, é assim que você deve marcá-lo.

(*: de qualquer forma, na autoria do site. Obviamente, eles são úteis para bookmarklets. as javascript:pseudo-URLs são uma bizarrice conceitual: um localizador que não aponta para um local, mas chama o código ativo dentro do local atual. Eles causaram enorme segurança problemas para navegadores e aplicativos da web e nunca deveria ter sido inventado pelo Netscape.)

Isso significa que não fará nada. É uma tentativa de fazer com que o link não 'navegue' em lugar nenhum. Mas não é o caminho certo.

Você deve realmente apenas return falseno onclickevento, assim:

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

Normalmente, é usado se o link estiver executando algo como 'JavaScript-y'. Como postar um formulário AJAX, trocar uma imagem ou o que for. Nesse caso, basta fazer retornar qualquer função que estiver sendo chamada false.

Para tornar seu site totalmente incrível, no entanto, geralmente você inclui um link que executa a mesma ação, se a pessoa que o navega optar por não executar o JavaScript.

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

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

"#" rola você no topo da página enquanto "javascript: void (0);" não.

Isso é muito importante se você estiver codificando páginas dinâmicas. o usuário não deseja voltar ao topo apenas porque clicou em um link na página.

É um método muito popular de adicionar funções JavaScript aos links HTML.
Por exemplo: os [Print]links que você vê em muitas páginas da web são escritos assim:

<a href="javascript:void(0)" onclick="callPrintFunction()">Print</a>

Por que precisamos hrefenquanto onclicksozinhos podemos fazer o trabalho? Como quando os usuários passam o mouse sobre o texto 'Imprimir' quando não há href, o cursor muda para um sinal de intercalação (ꕯ) em vez de um ponteiro (👆). Somente ter hrefuma atag valida como um hiperlink.

Uma alternativa para href="javascript:void(0);", é o uso de href="#". Essa alternativa não exige que o JavaScript esteja ativado no navegador do usuário, por isso é mais compatível.

Você deve sempre ter um href em seus um tags. Chamar uma função JavaScript que retorne 'indefinido' funcionará perfeitamente. O mesmo acontece com o link para '#'.

Marcas de âncora no Internet Explorer 6 sem href não obtêm o a:hoverestilo aplicado.

Sim, é terrível e um crime menor contra a humanidade, mas também o Internet Explorer 6 em geral.

Eu espero que isso ajude.

O Internet Explorer 6 é realmente um grande crime contra a humanidade.

Vale ressaltar que, às vezes, você verá 0 nulo ao procurar indefinido, simplesmente porque requer menos caracteres.

Por exemplo:

something === undefined

vs.

something === void 0

Alguns métodos de minificação substituem indefinido por nulo 0 por esse motivo.

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

As tags âncora geralmente são abusadas com o evento onclick para criar pseudo-botões, definindo href como "#" ou "javascript: void (0)" para impedir a atualização da página. Esses valores causam um comportamento inesperado ao copiar / arrastar links, abrir links em novas guias / janelas, marcar como favoritos e quando o JavaScript ainda está baixando, erros ou desativado. Isso também transmite semânticas incorretas para tecnologias assistivas (por exemplo, leitores de tela). Nesses casos, é recomendável usar um <button>. Em geral, você deve usar apenas uma âncora para navegação usando uma URL adequada.

Fonte: Página da MDN<a> .

voidé um operador usado para retornar um undefinedvalor para que o navegador não consiga carregar uma nova página.

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

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

uma mensagem de alerta será exibida sem carregar uma nova página, e isso é porque alerté uma função que retorna um valor nulo. Isso significa que quando o navegador tenta carregar uma nova página, ele vê nulo e não tem nada para carregar.

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

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

Para entender esse conceito, é preciso primeiro entender o operador nulo em JavaScript.

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

Se você implementar o void como uma função, terá a seguinte aparência:

function myVoid(expr) {
    return undefined;
}

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

Em algumas situações, é importante retornar indefinido em oposição ao resultado de uma expressão. Então void pode ser usado para descartar esse resultado. Uma dessas situações envolve javascript: URLs, que devem ser evitados para links, mas são úteis para bookmarklets. Quando você visita um desses URLs, muitos navegadores substituem o documento atual pelo resultado da avaliação do "conteúdo" dos URLs, mas apenas se o resultado não for indefinido. Portanto, se você deseja abrir uma nova janela sem alterar o conteúdo exibido no momento, pode fazer o seguinte:

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

O voidoperador avalia a expressão fornecida e, em seguida, retorna indefinido. Evita atualizar a página.

Os desenvolvedores da Web usam javascript:void(0)porque é a maneira mais fácil de impedir o comportamento padrão da atag. void(*anything*)retorna undefinede é um valor falso. e retornar um valor falso é como return falseno onclickcaso de uma atag que impede seu comportamento padrão.

Então eu acho que javascript:void(0)é a maneira mais simples de impedir o comportamento padrão da atag.

Um link deve ter um destino HREF a ser especificado para permitir que ele seja um objeto de exibição utilizável.

A maioria dos navegadores não analisa o JavaScript avançado em um

<A HREF="" 

tag como:

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

porque a tag HREF na maioria dos navegadores não permite espaços em branco ou converte espaços em branco em% 20, o HEX equivalente de um ESPAÇO, que torna seu JavaScript absolutamente inútil para o intérprete.

Portanto, se você deseja usar uma tag A HREF para executar o JavaScript embutido, especifique um valor válido para o HREF PRIMEIRO que não seja muito complexo (não contenha espaço em branco) e forneça o JavaScript em uma tag de atributo de evento como OnClick , OnMouseOver, OnMouseOut, etc.

A resposta típica é fazer algo assim:

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

Isso funciona bem, mas faz com que a página pule para o topo devido ao sinal de cerquilha / tag de hash diz para isso.

O simples fornecimento de uma marca de sinal / hash em uma marca A HREF na verdade especifica a âncora raiz, que é sempre, por padrão, a parte superior da página, você pode especificar um local diferente usando o atributo NAME dentro de uma marca A HREF.

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

Você pode alterar sua tag A HREF para ir para 'middleofpage' e executar o JavaScript no evento OnClick, uma vez que isso acontece da seguinte forma:

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

Haverá MUITAS vezes em que você não deseja que o link salte, para que você possa fazer duas coisas:

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

Agora ele não vai a lugar nenhum quando clicado, mas pode fazer com que a página se centralize novamente a partir da janela de exibição atual. Isso não é bonito. Qual é a melhor maneira de fornecer javascript in-line, usando um A HREF, mas sem ter que fazer nenhuma das opções acima? JavaScript: vazio (0);

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

Isso indica ao navegador para ir a lugar nenhum, mas, em vez disso, execute o JavaScript válido: void (0); funcione primeiro na tag HREF porque não contém espaços em branco e não será analisado como um URL. Em vez disso, ele será executado pelo compilador. VOID é uma palavra-chave que, quando fornecida com um parâmetro de 0, retorna UNDEFINED, que não utiliza mais recursos para manipular um valor de retorno que ocorreria sem especificar o 0 (é mais favorável ao gerenciamento de memória / desempenho).

A próxima coisa que acontece é que o OnClick é executado. A página não se move, nada acontece em termos de exibição.

JavaScript: URLs à parte; É aqui que o void pode ser útil para escrever códigos mais curtos.

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
}