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


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

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


12
javascript:é um dos muitos esquemas de URI: en.wikipedia.org/wiki/URI_scheme , como data:.
Ciro Santilli escreveu

3
Você pode usar apenas href="javascript:"para o mesmo propósito. Conforme indicado na resposta a esta pergunta , a void(0)peça foi originalmente projetada para versões anteriores de navegadores em que o javascript:tratamento com URI era diferente. Mas agora eu não conseguia nem encontrar uma versão em que a abreviação não funcionasse, pelo menos o IE7 lida com isso corretamente.
usuário

1
Eu também vi href = "javascript: //", isso é melhor?
sabre de luz

href = "javascript: //" não está funcionando para mim, o void (0) funciona perfeitamente.
sandip

Respostas:


1041

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.


9
o que significa quando href recebe um "valor primitivo indefinido"?
Omg

7
"normalmente um javascript: url redireciona o navegador para uma versão em texto sem formatação do resultado da avaliação desse javascript." Você pode fazer um exemplo aqui? Eu nunca vi esse uso.
Omg

87
Um exemplo do que a phoenix está falando é <a href="javascript: dosomething();"> FAÇA AGORA! </a> Se alguma coisa retornar falsa, clicar no link simplesmente fará o navegador sair da página e exibir "false". No entanto ... <a href="javascript: dosomething(); void(0)"> FAÇA AGORA! </a> evita o problema. Vá em frente e cole o javascript: 1 + 1; na barra de endereços do seu navegador. O navegador deve exibir "2"
Breton

9
Porque void é um operador unário. Vazio não é um valor, nem é uma função. Ele precisa de um valor para operar à sua direita ou gerará um erro.
Breton

14
tente procurar no console de erro? Definitivamente lança um erro de sintaxe. É javascript inválido. Douglas Crockford recomenda ficar longe do vazio por causa da confusão de operador / função / valor unário, que é muito dispendiosa para lidar.
Breton

436

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.)


7
Além da excelente publicação de @bobince: fiz uma pesquisa há alguns meses sobre a navegabilidade do teclado entre navegadores de hrefs, incluindo peculiaridades e efeitos colaterais; alguns de vocês podem achar útil: jakub-g.github.com/accessibility/onclick
jakub.g

2
@ThinkBonobo: SO mudou em algum momento desde 2009! Atualizada.
quer

59
Esta é uma opinião e não responde à pergunta. void(0)é necessário em muitos casos; "#" é um hack que traz consigo uma série de problemas (não funcionaria no aplicativo que estou escrevendo, que me levou a esta página).
felwithe

12
Eu concordo com @feltwithe. Por que forçar os outros a "fazê-lo de maneira particular"? Em 15 anos de programação Ainda estou para ver como o lema "deve ser sempre feito desta forma" não levam as pessoas a uma confusão de sua própria criação
Steven de Salas

4
Usar o ID do fragmento é uma má ideia do ponto de vista do UX, pois faz com que o documento pule para o topo da página, a menos que preventDefaultseja usado. Por favor, não faça isso no caso de uma âncora ser usada como botão em um formulário.
Josh Habdas 11/03/19

124

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>

33
não não - falso retorno vai parar o comportamento padrão, de modo que o # nunca aparecerá
Magnar

22
o protocolo javascript: url é um padrão defacto, não um padrão real. Portanto, o href = "#" onclick = "return false;" é compatível com os padrões, enquanto href = "javascript: void (0)" não é, porque não há um padrão oficial que especifique o que isso deve fazer.
1855 Breton

10
Além disso, Douglas Crockford não gosta de vazio, então o jslint vai reclamar disso. Basicamente, como o void é um operador, e não um valor, é confuso como o inferno e gera muitas perguntas como essa. Melhor evitá-lo completamente. haha
1859 Breton

4
Brandon: veja as respostas de brenton. A maneira que eu recomendo é a mais suportada e, como eu disse na segunda parte do meu post, em um site 'adequado' você nunca usará '#', porque estará fornecendo sistemas de fallback para lidar com a falta de javascript.
Noon Silk

19
+1 por incluir o exemplo completamente incrível . Mesmo se você não tiver um HTML estático substituto para o que está fazendo em JavaScript, sempre poderá fazer algo assim <a href="enableJavaScriptToSeeMyCompletelyAwesomeSite.html" onclick="completelyAwesome();return false;">.
Grant Wagner

73

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.


26
@Salvin: O comportamento de rolagem para o topo da página pode ser suprimido retornando falseao manipulador de eventos: onclick="doSomething();return false;"ou, se doSomething()retornar false, você pode usar onclick="return doSomething();".
Grant Wagner

41
@GrantWagner - Ou, 5 anos depois e.preventDefault(),.
trysis

1
Você pode querer editar / apagar esta resposta desde "#"que não vá até o topo quando você retornar falso.
Navin

4
@ Navin você está correto, mas isso agora é uma prática desatualizada. O comentário por trysis é considerado o caminho correto agora.
Tim Seguine

66

É 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.


7
também não serve para nada se o javascript estiver desativado.
Jasen

12
Você não precisa hrefpegar o cursor da mão apontadora; basta um pouco de CSS.
John Montgomery

1
Por que você não colocaria a função JavaScript no href e não no onclick?
Siddhartha Gandhi

2
Concordo com o @Sid - se você o estiver usando para acionar uma função javascript, <a href="javascript:callPrintFunction()">será mais limpo (embora provavelmente deva ser um buttonpouco mais que um anchor se não o levar a lugar nenhum).
DaveMongoose

href="#"pode levar a surpresas desagradáveis ​​- como solicitações abortadas de xhr, que são chamadas em um clique nesse link. Recentemente, tive dificuldade em depurar um site que abortou o login do oidc solicitado, se o usuário estivesse em um endereço que não fosse a raiz do site. #href fez com que recarregasse o endereço antes que a solicitação xhr fosse concluída.
23819 JustJartin

44

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.


25

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.


10
Um exemplo notável é o TypeScript ( exemplo ao vivo ), que compila valores de parâmetro padrão para verificação void 0. A diferença de três caracteres aumenta rapidamente quando muitos métodos estão usando valores de parâmetros padrão.
John Weisz

1
"Alguns métodos de minificação substituem indefinido por nulo 0 por esse motivo." Finalmente eu entendo! Obrigado @squall pela resposta completa.
Ahmed Mahmoud

22

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> .


4
+1 por exibir html semântico em uma pergunta antiga ... Os links vão a lugares, os botões fazem as coisas - se não queremos que pareça um botão, devemos limpar o estilo.
kevlarr

A grande exceção a isso seria mapas de imagem, que podem precisar executar JavaScript; e como não é um botão, é um link com limites poligonais, esse é o "único" caminho.

17

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>

1
Vi pessoas usando javascript: null em vez de nulo ... mas isso é um problema. O Chrome nulo funciona, no Firefox, ele tenta carregar a página nula. Que bom que você atualizou. Bug interessante.
precisa

Eu encontrei alguns outros usos em uma base de código como o javascript: null, mas com javascript: null () que é indefinido, para que funcione.
precisa

1
Então basicamente é como prevendDefault do jquery e retorna false?
Robert Rocha

16

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/")

2
Obrigado por esclarecer exatamente para que serve o argumento 'void'! Não ficou claro nas outras respostas, apenas que "o vazio leva uma discussão".
precisa saber é o seguinte

Boa resposta, mas um detalhe, a implementação nula será algo como: function myVoid(expr) { expr(); return undefined; } Você esqueceu add expr ();
Juanma Menendez

1
@ Juanma Menendez: não é verdade. exprjá é avaliada quando myVoid()chamado (o resultado dessa expressão é passado como parâmetro)
Udo G

@UdoG Estou curioso, como você conhece esses homens? você pode explicar, por favor.
Juanma Menendez

@JuanmaMenendez: as expressões nos parâmetros das funções são sempre avaliadas antes de chamar a própria função. Desculpe, não tenho nenhum documento em mãos que esclareça isso, mas tente você mesmo: function() { alert("foo"); }é uma expressão válida . void(function() { alert("foo"); })retorna undefinede não mostra o alerta, enquanto myVoid(function() { alert("foo"); })mostra (na sua versão, não a de Gopal Yadav ).
Udo G

14

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


9

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.


8

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.


+1 para explicar todas as diferentes maneiras pelas quais uma âncora como essa pode ser manipulada. Sou da opinião de que um <a>elemento sempre deve ir a algum lugar ; se estiver apenas na página para executar algum javascript, a <button>deve ser usado. Usar <button>é mais semântico e poupa você de todo esse debate sobre o que invadir uma âncora href. Edit: parece que a resposta de Ronnie Royston abaixo já tem esse argumento coberto.
Rabadash8820 18/03

1

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
}

Seria bom se os que recusaram pelo menos pudessem dizer por que votaram abaixo. Sei que não está no tópico da pergunta, mas estou pensando em todas as pessoas que vêm aqui a partir dos resultados da pesquisa.
Maciej Krawczyk
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.