Qual valor "href" devo usar para links JavaScript, "#" ou "javascript: void (0)"?


4076

A seguir, são apresentados dois métodos para criar um link com o único objetivo de executar o código JavaScript. Qual é melhor, em termos de funcionalidade, velocidade de carregamento da página, finalidades de validação etc.?

function myJsFunc() {
    alert("myJsFunc");
}
<a href="#" onclick="myJsFunc();">Run JavaScript Code</a>

ou

function myJsFunc() {
    alert("myJsFunc");
}
 <a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>


202
A menos que eu esteja perdendo alguma coisa, não <a href="javascript:void(0)" onclick="myJsFunc();">faz absolutamente nenhum sentido. Se você deve usar o javascript:protocolo psuedo, também não precisa do onclickatributo. <a href="javascript:myJsFunc();">vai fazer muito bem.
Wesley Murch #

65
@WesleyMurch - Se myJsFunc()tiver um valor de retorno, sua página será interrompida. jsfiddle.net/jAd9G você teria ainda tem que usar voidassim: <a href="javascript:void myJsFunc();">. Mas então, o comportamento ainda seria diferente. A chamada do link pelo menu de contexto não aciona o clickevento.
gilly3

38
Por que não apenas <a href="javascript:;" onclick="myEvent()"?
3k-

26
javascript:;é muito mais rápido de digitar do que #javascript:void(0)
Mike Causer 12/12

78
Primeiro, ao analisar isso: "por que você usaria uma <a>tag se o que você deseja fazer é NÃO abrir outra página via recurso nativo do navegador, mas sim ter alguma ação javascript a ser acionada? Simplesmente usando uma spantag com uma classe de js-triggerprovavelmente muito melhor ". Ou eu estou esquecendo de alguma coisa?
Adrien Seja

Respostas:


2164

Eu uso javascript:void(0).

Três razões Incentivar o uso de #uma equipe de desenvolvedores inevitavelmente leva alguns a usar o valor de retorno da função chamada assim:

function doSomething() {
    //Some code
    return false;
}

Mas então eles esquecem de usar return doSomething()no onclick e apenas usam doSomething().

Uma segunda razão para evitar #é que a final return false;não será executada se a função chamada gerar um erro. Portanto, os desenvolvedores também precisam se lembrar de manipular qualquer erro adequadamente na função chamada.

Um terceiro motivo é que há casos em que a onclickpropriedade do evento é atribuída dinamicamente. Prefiro poder chamar uma função ou atribuí-la dinamicamente sem precisar codificar a função especificamente para um método de anexo ou outro. Portanto, minha onclick(ou qualquer coisa) na marcação HTML fica assim:

onclick="someFunc.call(this)"

OU

onclick="someFunc.apply(this, arguments)"

O uso javascript:void(0)evita todas as dores de cabeça acima e não encontrei nenhum exemplo de desvantagem.

Portanto, se você é um desenvolvedor independente, pode claramente fazer sua própria escolha, mas se trabalhar em equipe, precisará declarar:

Use href="#", verifique se onclicksempre contém return false;no final, que qualquer função chamada não gera um erro e se você anexar uma função dinamicamente à onclickpropriedade, certifique-se de que, além de não gerar um erro, ela retorne false.

OU

Usar href="javascript:void(0)"

O segundo é claramente muito mais fácil de se comunicar.


329
Eu sempre abrir cada link em uma nova aba e esta é a razão pela qual eu pessoalmente odeio quando as pessoas usam o href="javascript:void(0)"método
Timo Huovinen

182
Desculpe discordar por que esta resposta tem tantos votos positivos? Qualquer uso de javascript:deve ser considerado uma má prática, intrusivo e não desclassifica graciosamente.
Lankymart

52
As próximas duas respostas são muito melhores e razoáveis ​​do que esta. Além disso, os dois primeiros argumentos são inválidos porque event.preventDefault()existem exatamente para impedir o comportamento padrão (como pular para o topo da página nesse caso) e fazer um trabalho melhor sem toda a return false;loucura.
Sudee

136
Avanço rápido para 2013: javascript:void(0)viola a Política de segurança de conteúdo nas páginas HTTPS habilitadas para CSP. Uma opção seria usar href='#'e event.preventDefault()no manipulador, mas não gosto muito disso. Talvez você possa estabelecer uma convenção para usar href='#void'e garantir que nenhum elemento da página tenha id="void". Dessa forma, clicar em um link para uma âncora inexistente não rolará a página.
Jkub.g

24
Você pode usar "#" e vincular um evento de clique a todos os links com "#" como o href. Isso seria feito no jQuery com:$('a[href="#"]').click(function(e) { e.preventDefault ? e.preventDefault() : e.returnValue = false; });
Nathan

1325

Nem.

Se você puder ter um URL real que faça sentido, use-o como HREF. O onclick não será acionado se alguém clicar com o botão do meio no seu link para abrir uma nova guia ou se o JavaScript estiver desativado.

Se isso não for possível, você deve pelo menos injetar a tag anchor no documento com JavaScript e os manipuladores de eventos de clique apropriados.

Sei que isso nem sempre é possível, mas, na minha opinião, deve ser buscado no desenvolvimento de qualquer site público.

Confira JavaScript discreto e aprimoramento progressivo (ambos Wikipedia).


19
Você pode dar um exemplo de como alguém pode "injetar a tag anchor no documento com JavaScript e os manipuladores de eventos de clique apropriados"?
user456584

11
Por que injetar a tag de âncora, se ela se destina apenas a ser usada para permitir que um elemento seja a) clicado b) exiba o cursor "ponteiro". Parece irrelevante até injetar uma tag de âncora nesse cenário.
esmagar

12
+1 para nenhum, mas há abordagens em excesso. O fato continua sendo o uso de uma javascript:ou #são práticas ruins e não deve ser incentivado. Artigos agradáveis ​​btw.
Lankymart

13
@ Crush: Eu também não usaria uma div ou span; francamente, isso parece exatamente o que <button>foi feito. Mas concordou: provavelmente não deve ser especificamente um <a>caso não exista um local adequado para o link.
cHao 02/09

14
O botão @cHao é talvez a melhor escolha. Suponho que o ponto principal é que o elemento HTML não deve ser selecionado com base em sua aparência de apresentação padrão, mas em seu significado para a estrutura do documento.
esmagar

775

Fazer <a href="#" onclick="myJsFunc();">Link</a>ou <a href="javascript:void(0)" onclick="myJsFunc();">Link</a>qualquer outra coisa que contenha um onclickatributo - era bom há cinco anos, embora agora possa ser uma má prática. Aqui está o porquê:

  1. Ele promove a prática de JavaScript invasivo - que se mostrou difícil de manter e difícil de dimensionar. Mais sobre isso em JavaScript discreto .

  2. Você está gastando seu tempo escrevendo código incrivelmente detalhado - o que tem muito pouco (se houver) benefício para sua base de código.

  3. Agora existem maneiras melhores, mais fáceis e mais sustentáveis ​​e escaláveis ​​de alcançar o resultado desejado.

A maneira discreta de JavaScript

Só não tem um hrefatributo! Qualquer boa redefinição de CSS cuidaria do estilo de cursor padrão ausente, o que é um problema. Em seguida, anexe sua funcionalidade JavaScript usando práticas recomendadas discretas e discretas - que são mais fáceis de manter à medida que sua lógica JavaScript permanece em JavaScript, em vez de em sua marcação - o que é essencial quando você começa a desenvolver aplicativos JavaScript em larga escala que exigem que sua lógica seja dividida em componentes e modelos na caixa preta. Mais sobre isso em arquitetura de aplicativos JavaScript em larga escala

Exemplo de código simples

// Cancel click event
$('.cancel-action').click(function(){
    alert('Cancel action occurs!');
});

// Hover shim for Internet Explorer 6 and Internet Explorer 7.
$(document.body).on('hover','a',function(){
    $(this).toggleClass('hover');
});
a { cursor: pointer; color: blue; }
a:hover,a.hover { text-decoration: underline; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cancel-action">Cancel this action</a>

Um exemplo de Backbone.js em caixa preta

Para obter um exemplo de componente escalável, em caixa preta, Backbone.js - consulte este exemplo de trabalho do jsfiddle aqui . Observe como utilizamos práticas discretas de JavaScript e, em uma pequena quantidade de código, temos um componente que pode ser repetido na página várias vezes sem efeitos colaterais ou conflitos entre as diferentes instâncias do componente. Surpreendente!

Notas

  • A omissão do hrefatributo no aelemento fará com que o elemento não seja acessível usando a tabnavegação por teclas. Se você deseja que esses elementos sejam acessíveis por meio da tabchave, você pode definir o tabindexatributo ou usar buttonelementos. Você pode estilizar facilmente os elementos do botão para se parecer com links normais, conforme mencionado na resposta do Tracker1 .

  • A omissão do hrefatributo no aelemento fará com que o Internet Explorer 6 e o Internet Explorer 7 não assumam o a:hoverestilo, motivo pelo qual adicionamos um shim simples de JavaScript para fazer isso via a.hover. O que é perfeitamente aceitável, como se você não tivesse um atributo href e nenhuma degradação normal, seu link não funcionaria de qualquer maneira - e você terá problemas maiores com que se preocupar.

  • Se você deseja que sua ação ainda funcione com o JavaScript desativado, use um aelemento com um hrefatributo que vá para algum URL que executará a ação manualmente, em vez de através de uma solicitação do Ajax ou qualquer outro caminho a seguir. Se você estiver fazendo isso, certifique-se de fazer uma event.preventDefault()chamada de clique para garantir que, quando o botão for clicado, ele não siga o link. Essa opção é chamada de degradação normal.


163
Tenha cuidado, deixando href atributos off não é cross browser compatível e você vai perder em coisas tais como efeitos de foco no Internet Explorer
Thomas Davis

16
Cuidado: a buttonabordagem com estilo de link sugerida aqui é atormentada pelo inevitável estado ativo "3d" no IE9 e inferior .
Brennan Roberts

44
Acho essa resposta excessivamente dogmática. Há momentos em que você deseja aplicar o comportamento JS a 1 ou 2 a href's. Nesse caso, é um exagero definir CSS extra e injetar uma função JS inteira. Em alguns casos (por exemplo, adicionando conteúdo por meio de um CMS), na verdade você não tem permissão para injetar novo CSS ou JS autônomo, e embutir é tudo que você pode fazer. Não vejo como a solução em linha é menos sustentável na prática para 1 ou 2 JS simples por href. Sempre desconfie de declarações gerais abrangentes sobre má prática, incluindo este :)
Jordan Rieger

17
Com todas essas "notas" difíceis de resolver (definir um índice de tabulação está causando problemas em uma página complexa!). Muito melhor apenas fazer javascript:void(0). Essa é a resposta pragmática e a única resposta sensata no mundo real.
Abhi Beckert

14
Se você se preocupa em tornar seu aplicativo Web acessível (e deveria), a simplicidade e a sanidade defendem o href. A loucura está na direção do tabindex.
Jkade # 6/13

328

'#'levará o usuário de volta ao topo da página, então eu costumo segui-lo void(0).

javascript:; também se comporta como javascript:void(0);


68
A maneira de evitar isso é retornar false no manipulador de eventos onclick.
Guvante 25/09/08

34
Retornar false no manipulador de eventos não evita que, se o JavaScript, o JS não for executado com êxito.
Quentin

28
usar "#someNonExistantAnchorName" funciona bem porque não tem para onde ir.
scunliffe 27/09/08

21
Se você tiver um href base, então #ou #somethingo levará para essa âncora na página href base , em vez de na página atual.
Abhi Beckert 28/03

11
O shebang ( #!) faz o truque, mas é definitivamente uma prática ruim.
Neel

276

Eu sinceramente sugeriria nenhum. Eu usaria um estilizado <button></button>para esse comportamento.

button.link {
  display: inline-block;
  position: relative;
  background-color: transparent;
  cursor: pointer;
  border: 0;
  padding: 0;
  color: #00f;
  text-decoration: underline;
  font: inherit;
}
<p>A button that looks like a <button type="button" class="link">link</button>.</p>

Dessa forma, você pode atribuir seu onclick. Sugiro também a ligação via script, não usando o onclickatributo na tag do elemento. O único problema é o efeito de texto 3d psuedo em IEs mais antigos que não podem ser desativados.


Se você DEVE usar um elemento A, use javascript:void(0);pelos motivos já mencionados.

  • Sempre interceptará caso seu evento onclick falhe.
  • Não haverá chamadas de carregamento erradas ou acionará outros eventos com base em uma alteração de hash
  • A tag hash pode causar comportamento inesperado se o clique cair (acionamento de um clique), evitá-lo, a menos que seja um comportamento fall-through apropriado e você desejar alterar o histórico de navegação.

OBSERVAÇÃO: você pode substituir 0por uma sequência como a javascript:void('Delete record 123')que pode servir como um indicador extra que mostrará o que o clique realmente fará.


No IE8 / IE9, não consigo remover o deslocamento 1px "3D" no estado ativo do botão.
Brennan Roberts

@BrennanRoberts Sim, infelizmente, qualquer estilo de botão é mais problemático com o IE ... Eu ainda acho que é provavelmente a abordagem mais apropriada, não que eu não quebre minhas próprias regras de vez em quando.
precisa

Então não use <button>apenas um input type=button?
Patrik Affentranger

4
Então use um <clickable>elemento. Ou a <clickabletim>se você preferir. Infelizmente, o uso de uma tag não padrão ou de uma div simples pode dificultar o foco do elemento nos usuários do teclado.
Joeytwiddle

28
Esta resposta deve estar no topo. Se você está tendo esse dilema, é provável que precise de um button. Felizmente, o IE9 está perdendo rapidamente participações de mercado, e o efeito ativo de 1px não deve nos impedir de usar a marcação semântica. <a>é um link, destinado a enviar você a algum lugar, pelas ações que temos <button>.
Mjsarfatti

141

O primeiro, idealmente com um link real a seguir, caso o usuário tenha o JavaScript desativado. Apenas certifique-se de retornar false para impedir que o evento click seja acionado se o JavaScript for executado.

<a href="#" onclick="myJsFunc(); return false;">Link</a>

Se você usa o Angular2, funciona dessa maneira:

<a [routerLink]="" (click)="passTheSalt()">Click me</a>.

Consulte aqui https://stackoverflow.com/a/45465728/2803344


19
Assim, em agentes de usuário com JavaScript ativado e a função suportada, execute uma função JavaScript, retornando (para agentes de usuário em que a JS falha por qualquer motivo) a um link para o topo da página? Isso raramente é uma alternativa sensata.
Quentin

21
"idealmente, com um link real a ser seguido, caso o usuário tenha o JavaScript desativado", ele deve ir para uma página útil, não #, mesmo que seja apenas uma explicação de que o site precisa do JS para funcionar. quanto à falha, eu esperaria que o desenvolvedor usasse a detecção adequada de recursos do navegador etc. antes de implantar.
Zach

Eu diria (espero) que algo assim seria apenas para mostrar um pop-up ou algo similarmente simples. Nesse caso, o padrão seria o URL da página pop-up. Se isso é parte de uma aplicação web, ou ter JS desabilitado seria totalmente quebrar a página, então este código tem outras questões ...
Brian Moeskau

5
Meus aplicativos da web foram projetados para degradar normalmente, portanto o link ainda será uma página útil. A menos que seu aplicativo Web seja um cliente de bate-papo ou algo interativo, isso funcionará se você dedicar um tempo ao design com a degradação em mente.
Zach

2
O problema é que, se myJsFunc gerar um erro, ele não será capturado pelo retorno false.
precisa

106

Nem se você me perguntar;

Se o seu "link" tem o único objetivo de executar algum código JavaScript, ele não se qualifica como um link; um pedaço de texto com uma função JavaScript acoplada a ele. Eu recomendaria usar uma <span>tag com um onclick handleranexo e algum CSS básico para imitar um link. Os links são criados para navegação e, se o seu código JavaScript não for para navegação, não deve ser uma <a>tag.

Exemplo:

function callFunction() { console.log("function called"); }
.jsAction {
    cursor: pointer;
    color: #00f;
    text-decoration: underline;
}
<p>I want to call a JavaScript function <span class="jsAction" onclick="callFunction();">here</span>.</p>


126
Essa abordagem restringe o 'link' a uma operação apenas de mouse. Uma âncora pode ser visitada através do teclado e seu evento 'onclick' é disparado quando a tecla Enter é pressionada.
AnthonyWJones

40
A codificação das cores em seu CSS impediria o navegador de usar cores personalizadas definidas pelo usuário, o que pode ser um problema de acessibilidade.
28909 Hosam Aly

30
<span>s não devem fazer nada. <A>nchors e <buttons>são usados ​​para isso!
redShadow

22
Usar buttonsé uma escolha melhor aqui enquanto usar um spannão é.
Apnerve

1
Eu acho que uma extensão é melhor do que uma marca de âncora. A tag Anchor existe para direcioná-lo ao seu atributo href obrigatório. Se você não usar o href, não use uma âncora. Ele não restringe o link ao mouse apenas porque não é um link. Não tem um href. É mais como um botão, mas não é postado. O período que não pretende fazer nada é completamente inválido. Considere um menu suspenso que é ativado quando você passa o mouse. Provavelmente é uma combinação de vãos e divs, executando a função de um botão que expande uma área na tela.
NibblyPig

97

Idealmente, você faria isso:

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

Ou, melhor ainda, você teria o link de ação padrão no HTML e adicionaria o evento onclick ao elemento sem obstrução via JavaScript após a renderização do DOM, garantindo assim que, se o JavaScript não estiver presente / utilizado, você não tenha manipuladores de eventos inúteis adivinhando seu código e potencialmente ofuscar (ou pelo menos distrair) seu conteúdo real.


76

Usando apenas #faz alguns movimentos engraçados, então eu recomendaria usar #selfse você gostaria de economizar nos esforços de digitação JavaScript bla, bla,.


7
WOW, polegares para cima para esta dica. Você nunca soube que poderia usar as #selftags for nomeadas e evitar o comportamento irritante do navegador ao pular para o topo da página. Obrigado.
Albert.torres

34
Para referência, #selfnão parece ser especial. Qualquer identificador de fragmento que não corresponda ao nome ou ID de qualquer elemento no documento (e não esteja em branco ou "em cima") deve ter o mesmo efeito.
cHao

1
Normalmente, uso apenas um nome de âncora inventado, mas acho que vou começar a fazer isso para ser consistente em todo o meu trabalho.
Douglas.Sesar

11
Sugeri estabelecer #voidconvenção no outro comentário, mas na verdade #selfé tão curto e fácil de memorizar. Qualquer coisa é melhor que#
jakub.g

6
Mas se você clicar nesse link, será estranho para o usuário ver "#void" no URL, com aparência e erro ou bug, o mesmo com #self ou o que seja.
pmiranda

68

Eu uso o seguinte

<a href="javascript:;" onclick="myJsFunc();">Link</a>

em vez de

<a href="javascript:void(0);" onclick="myJsFunc();">Link</a>

2
Eu uso javascript:(sem ponto e vírgula) porque parece mais arrumado na barra de status ao passar o mouse.
Boann 29/07

4
Esse código pode causar surpresas ruins no IE mais antigo. Em algum ponto, usado para quebrar quaisquer efeitos de animação com imagens, incluindo capotamentos e gifs mesmo animados: groups.google.com/forum/#!topic/comp.lang.javascript/...
Ilya Streltsyn

Você sempre pode fazer ... javascript:void('Do foo')como o void retornará indefinido, independentemente, ele dará um indicador ao usuário sobre o que o clique fará. Onde Do foopode estar Delete record Xou o que você quiser.
precisa

53

Concordo com sugestões em outros lugares, afirmando que você deve usar URL regular no hrefatributo e chamar alguma função JavaScript no onclick. A falha é que eles adicionam automaticamente return falseapós a chamada.

O problema dessa abordagem é que, se a função não funcionar ou se houver algum problema, o link se tornará impossível de clicar. O evento Onclick sempre retornará false, portanto o URL normal não será chamado.

Existe uma solução muito simples. Deixe a função retornar truese funcionar corretamente. Em seguida, use o valor retornado para determinar se o clique deve ser cancelado ou não:

Javascript

function doSomething() {
    alert( 'you clicked on the link' );
    return true;
}

HTML

<a href="path/to/some/url" onclick="return !doSomething();">link text</a>

Note que eu nego o resultado da doSomething()função. Se funcionar, ele retornará true, portanto será negado ( false) e path/to/some/URLnão será chamado. Se a função retornar false(por exemplo, o navegador não suportar algo usado dentro da função ou se algo der errado), ela será negada truee path/to/some/URLserá chamada.


50

#é melhor que javascript:anything, mas o seguinte é ainda melhor:

HTML:

<a href="/gracefully/degrading/url/with/same/functionality.ext" class="some-selector">For great justice</a>

JavaScript:

$(function() {
    $(".some-selector").click(myJsFunc);
});

Você deve sempre se esforçar para degradar normalmente (caso o usuário não tenha o JavaScript ativado ... e quando esteja com especificações e orçamento). Além disso, é considerado incorreto usar atributos e protocolo JavaScript diretamente em HTML.


1
@ Muhd: O retorno deve ser ativado clicknos links ...
Ry-

50

Eu recomendo usar um <button>elemento, especialmente se o controle deve produzir uma alteração nos dados. (Algo como um POST.)

É ainda melhor se você injetar os elementos de maneira discreta, um tipo de aprimoramento progressivo. (Veja este comentário .)


2
Eu também acho que essa é a melhor solução. Se você possui um elemento destinado a executar uma ação, não há razão para que seja um link.
mateuscb

Se você perguntasse e seu href pareceria "#something", algumas das outras respostas listadas podem servir, mas: Sem o href vinculado a algo sensato, não há sentido em ter um href, ou mesmo um link completo. O uso sugerido do botão pode funcionar ou usar qualquer outro elemento, exceto um link de agradecimento, em nenhum lugar.
kontur

1
Outra vantagem disso é que o Bootstrap .btnfaz com que botões e links pareçam exatamente iguais.
Ciro Santilli

Da perspectiva do usuário, buttontambém não introduz um # no URL ou mostra o ahref como javascript :;
Coll

39

A menos que você esteja escrevendo o link usando JavaScript (para saber que ele está ativado no navegador), idealmente, você deve fornecer um link adequado para as pessoas que estão navegando com o JavaScript desabilitado e impedir a ação padrão do link no seu onclick manipulador de eventos. Dessa forma, aqueles com JavaScript ativado executarão a função e aqueles com JavaScript desativado irão para uma página apropriada (ou local dentro da mesma página), em vez de apenas clicar no link e não acontecer nada.


36

Definitivamente o hash ( #) é melhor porque no JavaScript é um pseudo-esquema:

  1. polui a história
  2. instancia uma nova cópia do mecanismo
  3. é executado no escopo global e não respeita o sistema de eventos.

É claro que "#" com um manipulador onclick que impede que a ação padrão seja [muito] melhor. Além disso, um link com o único objetivo de executar JavaScript não é realmente "um link", a menos que você esteja enviando o usuário para uma âncora sensível na página (apenas # será enviado para o topo) quando algo der errado. Você pode simplesmente simular a aparência do link com a folha de estilo e esquecer o href.

Além disso, em relação à sugestão de cowgod, particularmente esta: ...href="javascript_required.html" onclick="...Esta é uma boa abordagem, mas não distingue entre os cenários "JavaScript desabilitado" e "falha ao clicar no onclick".


1
@Berker Yüceer, por que a CW?
Consultoria gratuita

30

Eu costumo ir

<a href="javascript:;" onclick="yourFunction()">Link description</a>

É mais curto que o javascript: void (0) e faz o mesmo.


27

Eu usaria:

<a href="#" onclick="myJsFunc();return false;">Link</a>

Razões:

  1. Isso torna os hrefmecanismos de pesquisa simples, necessários. Se você usar qualquer outra coisa (como uma string), isso poderá causar um 404 not founderro.
  2. Quando o mouse passa o mouse sobre o link, ele não mostra que é um script.
  3. Ao usar return false;, a página não pula para o topo ou quebra o backbotão.

eu não concordo com "1". causa erro quando você coloca o link do script quando scripts não são permitidos. para que esse tipo de link seja adicionado ao código js. dessa forma, as pessoas podem evitar esses links enquanto o script não é permitido e não vêem nenhum erro.
Berker Yüceer

25

Eu escolhi usar javascript:void(0), porque isso pode impedir o clique com o botão direito do mouse para abrir o menu de conteúdo. Mas javascript:;é mais curto e faz a mesma coisa.


24

Portanto, quando você faz algumas coisas em JavaScript com uma <a />tag e, se colocar href="#", também pode adicionar return false no final do evento (no caso de ligação de evento inline) como:

<a href="#" onclick="myJsFunc(); return false;">Run JavaScript Code</a>

Ou você pode alterar o atributo href com JavaScript, como:

<a href="javascript://" onclick="myJsFunc();">Run JavaScript Code</a>

ou

<a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>

Mas semanticamente, todas as formas acima para conseguir isso estão erradas (embora funcione bem) . Se algum elemento não for criado para navegar na página e tiver algumas coisas JavaScript associadas, ele não deverá ser um<a> tag.

Você pode simplesmente usar a <button />para fazer coisas ou qualquer outro elemento, como b, span ou o que for mais adequado, conforme sua necessidade, porque você pode adicionar eventos em todos os elementos.


Portanto, há um benefício a ser usado <a href="#">. Você obtém o ponteiro do cursor por padrão nesse elemento quando obtém a href="#". Por isso, acho que você pode usar CSS para isso comocursor:pointer; que resolve esse problema também.

E, no final, se você estiver vinculando o evento a partir do próprio código JavaScript, poderá fazê event.preventDefault()-lo se estiver usando a <a>tag, mas se não estiver usando um<a> tag para isso, obterá uma vantagem, você não Não preciso fazer isso.

Então, se você vê, é melhor não usar uma tag para esse tipo de coisa.


23

Não use links com o único objetivo de executar o JavaScript.

O uso de href = "#" rola a página para o topo; o uso de void (0) cria problemas de navegação no navegador.

Em vez disso, use um elemento que não seja um link:

<span onclick="myJsFunc()" class="funcActuator">myJsFunc</span>

E estilize-o com CSS:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

13
Use um botão, não um espaço. Botões naturalmente cair na ordem do foco assim que pode ser acessado sem um mouse / trackpad / etc
Quentin

4
Adicionando o comentário de ton Quentin: como atualmente escrito, os usuários de teclado não alcançarão o spanelemento porque é um elemento não focalizável. É por isso que você precisa de um botão.
Tsundoku 25/07

1
Você pode torná-lo focável adicionando tabindex="0"ao intervalo. Dito isto, usar o botão é melhor porque oferece a funcionalidade desejada gratuitamente. Para torná-lo acessível usando um intervalo, você não apenas precisa anexar um manipulador de cliques, mas um manipulador de eventos do teclado que procura pressionamentos de barra de espaço ou tecla enter e, em seguida, aciona o manipulador de cliques normal. Você também deseja alterar o segundo seletor de CSS para, .funcActuator:hover, .funcActuator:focuspara que o fato de o elemento ter foco seja aparente.
Código inútil

22

Seria melhor usar jQuery,

$(document).ready(function() {
    $("a").css("cursor", "pointer");
});

e omita ambos href="#"e href="javascript:void(0)".

A marcação da marca âncora será como

<a onclick="hello()">Hello</a>

Simples o suficiente!


5
Era o que eu ia dizer. Se um link tiver um URL de fallback que faça sentido, use-o. Caso contrário, apenas omita o href ou use algo mais semanticamente apropriado do que um <a>. Se a única razão pela qual todos estão defendendo, incluindo o href, é colocar o dedo em foco, um simples "a {cursor: pointer;}" fará o truque.
22610 Matt Kantor

12
Isso dá uma acessibilidade terrível. Experimente da seguinte maneira: você não pode sinalizar uma postagem sem usar o mouse. Os links "link" e "edit" podem ser acessados ​​com guias, mas "flag" não é.
Nicolás

6
Eu concordo com esta opção. Se a âncora não tiver outro propósito além do JavaScript, ela não deverá ter um href. @Fatih: Usar o jQuery significa que se o JavaScript estiver desativado, o link NÃO terá um ponteiro.
Scott Rippey

3
Se você for seguir esse caminho, por que não vincular o clique usando o jQuery também? Parte da grande vantagem do uso do jQuery é a capacidade de separar seu javascript da sua marcação.
Muhd

4
Não acredito que esta resposta tenha 11 votos. É terrível. Por que você está adicionando um estilo via Javascript (e jQuery ??) e depois definindo sua ação onclick em HTML? Terrível.
MMM 29/01

20

Se você estiver usando o AngularJS , poderá usar o seguinte:

<a href="">Do some fancy JavaScript</a>

O que não fará nada.

além do que, além do mais

  • Não o levará ao topo da página, como em (#)
    • Portanto, você não precisa retornar explicitamente falsecom JavaScript
  • É curto e conciso

6
Mas isso faria com que a página fosse recarregada e, como estamos sempre usando o javascript para modificar a página, isso é inaceitável.
Henry Hu

@HenryHu Eu descobri que o motivo pelo qual não recarregou foi por causa do AngularJS. Veja minha resposta atualizada.
whirlwin

19

Se não houver, hreftalvez não haja motivo para usar uma marca de âncora.

Você pode anexar eventos (clique, passar o mouse etc.) em quase todos os elementos. Por que não usar apenas a spanou a div?

E para usuários com JavaScript desativado: se não houver um substituto (por exemplo, uma alternativa href), eles devem pelo menos não conseguir ver e interagir com esse elemento, seja ele <a>uma <span>marca ou uma tag.


19

Normalmente, você sempre deve ter um link de retorno para garantir que os clientes com JavaScript desativado ainda tenham alguma funcionalidade. Esse conceito é chamado JavaScript discreto.

Exemplo ... Digamos que você tenha o seguinte link de pesquisa:

<a href="search.php" id="searchLink">Search</a>

Você sempre pode fazer o seguinte:

var link = document.getElementById('searchLink');

link.onclick = function() {
    try {
        // Do Stuff Here        
    } finally {
        return false;
    }
};

Dessa forma, as pessoas com JavaScript desabilitado são direcionadas search.phpenquanto seus visualizadores com JavaScript visualizam sua funcionalidade aprimorada.


17

Eu pessoalmente os uso em combinação. Por exemplo:

HTML

<a href="#">Link</a>

com um pouco de jQuery

$('a[href="#"]').attr('href','javascript:void(0);');

ou

$('a[href="#"]').click(function(e) {
   e.preventDefault();
});

Mas estou usando isso apenas para impedir que a página pule para o topo quando o usuário clica em uma âncora vazia. Eu raramente estou usando onClick e outroson eventos diretamente em HTML.

Minha sugestão seria usar o <span>elemento com o classatributo em vez de uma âncora. Por exemplo:

<span class="link">Link</span>

Em seguida, atribua a função a .linkum script envolto no corpo e imediatamente antes da </body>tag ou em um documento JavaScript externo.

<script>
    (function($) {
        $('.link').click(function() {
            // do something
        });
    })(jQuery);
</script>

* Nota: Para elementos criados dinamicamente, use:

$('.link').on('click', function() {
    // do something
});

E para elementos criados dinamicamente, criados com elementos criados dinamicamente, use:

$(document).on('click','.link', function() {
    // do something
});

Em seguida, você pode estilizar o elemento span para parecer uma âncora com um pouco de CSS:

.link {
    color: #0000ee;
    text-decoration: underline;
    cursor: pointer;
}
.link:active {
    color: red;
}

Aqui está um exemplo do jsFiddle acima mencionado.


16

Dependendo do que você deseja realizar, você pode esquecer o onclick e apenas usar o href:

<a href="javascript:myJsFunc()">Link Text</a>

Isso evita a necessidade de retornar false. Não gosto da #opção porque, como mencionado, levará o usuário ao topo da página. Se você tiver algum outro lugar para enviar ao usuário, se ele não tiver o JavaScript ativado (o que é raro no local onde trabalho, mas é uma boa ideia), o método proposto por Steve funciona muito bem.

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

Por fim, você pode usar javascript:void(0)se não deseja que ninguém vá a lugar algum e se não deseja chamar uma função JavaScript. Funciona muito bem se você tem uma imagem na qual deseja que um evento de mouseover aconteça, mas não há nada para o usuário clicar.


3
A única desvantagem disso (na memória, posso estar errado) é que o IE não considera um A como A se você não tiver um href dentro dele. (Regras CSS para não funcionará)
Benjol

16

Quando tenho vários links falsos, prefiro dar a eles uma classe de 'sem link'.

Em seguida, no jQuery, adiciono o seguinte código:

$(function(){
   $('.no-link').click(function(e){
       e.preventDefault();
   });
});

E para o HTML, o link é simplesmente

<a href="/" class="no-link">Faux-Link</a>

Não gosto de usar tags hash, a menos que sejam usadas para âncoras, e só faço o acima quando tenho mais de dois links falsos, caso contrário, uso o javascript: void (0).

<a href="javascript:void(0)" class="no-link">Faux-Link</a>

Normalmente, eu gosto de evitar o uso de um link e apenas enrolar algo em um intervalo e usá-lo como uma maneira de ativar algum código JavaScript, como um pop-up ou uma revelação de conteúdo.


16

Eu acredito que você está apresentando uma falsa dicotomia. Essas não são as únicas duas opções.

Concordo com o Sr. D4V360, que sugeriu que, mesmo que você esteja usando a marca de âncora, você realmente não tem uma âncora aqui. Tudo o que você tem é uma seção especial de um documento que deve se comportar um pouco diferente. Uma <span>tag é muito mais apropriada.


Além disso, se você substituir um apor um span, precisará se lembrar de torná-lo focável via teclado.
precisa saber é o seguinte

16

Eu tentei tanto no google chrome com as ferramentas de desenvolvedor, e id="#"demorou 0,32 segundos. Enquanto o javascript:void(0)método levou apenas 0,18 segundos. Portanto, no google chrome, javascript:void(0)funciona melhor e mais rápido.


Na verdade, eles não fazem o mesmo. # faz você pular para o topo da página.
Jochen Schultz

13

Estou basicamente parafraseando este artigo prático usando aprimoramento progressivo . A resposta curta é que você nunca usa javascript:void(0);ou a #menos que sua interface com o usuário já tenha inferido que o JavaScript está ativado. Nesse caso, você deve usarjavascript:void(0); . Além disso, não use span como links, pois isso é semanticamente falso para começar.

Usar rotas de URL amigáveis ​​para SEO em seu aplicativo, como / Home / Ação / Parâmetros, também é uma boa prática. Se você tiver um link para uma página que funcione sem JavaScript primeiro, poderá aprimorar a experiência posteriormente. Use um link real para uma página de trabalho e adicione um evento onlick para aprimorar a apresentação.

Aqui está uma amostra. Home / ChangePicture é um link de trabalho para um formulário em uma página completo com interface do usuário e botões de envio de HTML padrão, mas parece melhor injetado em uma caixa de diálogo modal com os botões jQueryUI. De qualquer maneira, dependendo do navegador, o que satisfaz o primeiro desenvolvimento móvel.

<p><a href="Home/ChangePicture" onclick="return ChangePicture_onClick();" title="Change Picture">Change Picture</a></p>

<script type="text/javascript">
    function ChangePicture_onClick() {
        $.get('Home/ChangePicture',
              function (htmlResult) {
                  $("#ModalViewDiv").remove(); //Prevent duplicate dialogs
                  $("#modalContainer").append(htmlResult);
                  $("#ModalViewDiv").dialog({
                      width: 400,
                      modal: true,
                      buttons: {
                          "Upload": function () {
                              if(!ValidateUpload()) return false;
                              $("#ModalViewDiv").find("form").submit();
                          },
                          Cancel: function () { $(this).dialog("close"); }
                      },
                      close: function () { }
                  });
              }
        );
        return false;
    }
</script>

Em termos de SEO, eu preferiria assim. Usar tantos URLs amigáveis ​​definitivamente melhorará o fator de valor da página.
Chetabahana
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.