Função JavaScript em href vs. onclick

Eu quero executar uma function JavaScript simples em um clique sem qualquer redirecionamento.

Existe alguma diferença ou benefício entre colocar a chamada JavaScript no atributo href (assim:

 .... 

) vs. colocando-o no atributo onclick (ligando-o ao evento onclick )?

Colocar o onclick dentro do href ofenderia aqueles que acreditam fortemente na separação do conteúdo do comportamento / ação. O argumento é que o seu conteúdo html deve permanecer focado apenas no conteúdo, não na apresentação ou no comportamento.

O caminho típico nos dias de hoje é usar uma biblioteca javascript (por exemplo, jquery) e criar um manipulador de events usando essa biblioteca. Seria algo parecido com:

 $('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } ); 

mau:

 link text 

Boa:

 link text 

Melhor:

 link text 

melhor ainda 1:

 link text 

ainda melhor 2:

 link text 

Por que melhor? porque return false impedirá que o navegador siga o link

melhor:

Use jQuery ou outra estrutura semelhante para append o manipulador onclick pelo ID do elemento.

 $('#myLink').click(function(){ MyFunction(); return false; }); 

Em termos de javascript , uma diferença é que a palavra this chave this no manipulador onclick se referirá ao elemento DOM cujo atributo onclick é (neste caso o elemento ), enquanto que no atributo href se referirá ao object window .

Em termos de apresentação , se um atributo href estiver ausente de um link (ou seja, ), por padrão, os navegadores exibirão o cursor de text (e não o cursor de pointer desejado com frequência) já que está tratando o como uma âncora, e não um link.

Em termos de comportamento , ao especificar uma ação por navegação via href , o navegador normalmente suportará a abertura de href em uma janela separada usando um atalho ou um menu de contexto. Isso não é possível ao especificar uma ação somente via onclick .


No entanto, se você estiver perguntando qual é a melhor maneira de obter ação dinâmica a partir do clique de um object DOM, append um evento usando javascript separado do conteúdo do documento é o melhor caminho a percorrer. Você poderia fazer isso de várias maneiras. Uma maneira comum é usar uma biblioteca javascript como o jQuery para ligar um evento:

  link text  

eu uso

 Click HERE 

Um longo caminho, mas faz o trabalho. use um estilo A para simplificar, então ele se torna:

  HERE 

Além de tudo aqui, o href é mostrado na barra de status do navegador e onclick não. Eu acho que não é amigável para mostrar o código javascript lá.

A melhor maneira de fazer isso é com:

  

O problema é que isso adicionará um hash (#) ao final da URL da página no navegador, exigindo que o usuário clique duas vezes no botão voltar para ir para a página anterior à sua. Considerando isso, você precisa adicionar algum código para parar a propagação do evento. A maioria dos kits de ferramentas javascript já terá uma function para isso. Por exemplo, o kit de ferramentas do dojo usa

 dojo.stopEvent(event); 

para fazer isso.

funcionou para mim usando esta linha de código:

 text 

Ter javascript: em qualquer atributo que não seja especificamente para scripts, existe um método desatualizado de HTML. Embora tecnicamente funcione, você ainda está atribuindo propriedades de javascript a um atributo não-script, o que não é uma boa prática. Ele pode até falhar em navegadores antigos, ou até mesmo em alguns navegadores modernos (um post do fórum pesquisado parece indicar que o Opera não gosta de ‘javascript:’ urls).

Uma prática melhor seria a segunda maneira de colocar seu javascript no atributo onclick , que é ignorado se nenhuma funcionalidade de script estiver disponível. Coloque um URL válido no campo href (geralmente ‘#’) para fallback para aqueles que não possuem javascript.

Pessoalmente, acho irritante colocar as chamadas javascript na tag HREF. Eu normalmente não presto muita atenção se algo é um link javascript ou não, e muitas vezes quero abrir as coisas em uma nova janela. Quando tento fazer isso com um desses tipos de links, recebo uma página em branco sem nada e javascript na minha barra de localização. No entanto, isso é contornado um pouco usando um onlick.

Só mais uma coisa que notei ao usar “href” com javascript:

O script no atributo “href” não será executado se a diferença de tempo entre dois cliques for muito curta.

Por exemplo, tente executar o exemplo a seguir e clique duas vezes (rápido!) Em cada link. O primeiro link será executado apenas uma vez. O segundo link será executado duas vezes.

  href onclick 

Reproduzido no Chrome (clique duplo) e IE11 (com clique triplo). No Chrome, se você clicar com velocidade suficiente, poderá fazer 10 cliques e ter apenas 1 execução de function.

O Firefox funciona bem.

Isso funciona

 Click Here 

A resposta principal é uma prática muito ruim, nunca se deve vincular a um hash vazio, pois pode criar problemas no futuro.

O melhor é ligar um manipulador de events ao elemento, como várias outras pessoas afirmaram, no entanto, o do stuff funciona perfeitamente em todos os navegadores modernos, e eu o uso extensivamente ao renderizar modelos para evitar ter que religar para cada instância. Em alguns casos, essa abordagem oferece melhor desempenho. YMMV

Outro interessante tid-bit ….

onclick & href têm comportamentos diferentes ao chamar o javascript diretamente.

onclick passará this contexto corretamente, enquanto href não, ou em outras palavras, no context não funcionará, enquanto no context .

Sim, omiti o href . Embora isso não siga as especificações, ele funcionará em todos os navegadores, embora, idealmente, ele deva include um href="javascript:void(0);" por boa medida