22

Popularmente, existem dois métodos de criar links que executam uma função em JavaScript, são eles:

<a href="#" onclick="myFunction();">Executar JavaScript</a>

ou

<a href="javascript:void(0)" onclick="myFunction();">Executar JavaScript</a>

Considerando funcionalidade, carregamento da página, etc... Qual é o mais recomendado?

3 Respostas 3

26

Nenhum.

Problemas

  • A utilização de quaisquer um destes exemplos promove o "JavaScript obstrutivo" o que torna o código difícil de manter e nada escalável.
  • Usar javascript:void(0) não permite que os usuários abram este link em nova aba, o que pode ser frustrante.
  • Usar javascript:void(0) viola a Política de Segurança de Conteúdo (CSP) em páginas seguras (HTTPS).
  • Usar # faz com que o usuário volte para a o topo da página e necessita de um return false; para que funcione corretamente.

Conclusão

Na minha opinião, a tag button é mais recomendada que a tag a, ela pode inclusive assumir a aparência de um link com CSS:

.link {
  background-color: transparent;
  border: 0;
  color: #00f;
  cursor: pointer;
  display: inline-block;
  padding: 0;
  position: relative;
  text-decoration: underline;
}

Caso a utilização da tag button não seja uma opção, a melhor forma de escrever o seu código nestes casos é retirando o atributo href, você não tem obrigatoriedade de utiliza-lo em tudo. Qualquer bom CSS reset, como o Normalize cuida da definição padrão do estilo do cursor, para que a usabilidade possa ser mantida. Além disso, para que você tenha um código escalável e de fácil manutenção, sua lógica precisa "permanecer" no próprio JavaScript.

Exemplo:

Seu HTML:

<a class="action">Ação</a>

Seu JavaScript:

var actionButton = document.querySelector('.action');
actionButton.addEventListener('click', myFunction);

/* Usando jQuery */
$('.action').on('click', myFunction);

Observações

  • Retirar o atributo href do a causa um problema de acessibilidade, pois o elemento passa a não ser mais acessível através da navegação pela tecla tab. Você pode definir um tabindex ou substituir por um button, que pode facilmente assumir a aparência de um link.
  • Retirar o atributo href do a causa problemas relacionados ao hover nas versões 6 e 7 do Internet Explorer. Se necessário, isso pode ser facilmente resolvido com JavaScript.
  • Se você deseja que seu link continue funcionando se o JavaScript estiver desabilitado, use o elemento href e insira event.preventDefault() no final da ação do código JavaScript. Isso é um ótimo exemplo de graceful degradation.
  • Em casos extremos, onde o controle do código JavaScript seja limitado, a melhor opção é a javascript:void(0) pois é o que irá causar menos problemas.

Bônus

Existe um outro método, que é a utilização de uma âncora não existente por padrão, como no exemplo abaixo:

<a href="#void" onclick="myFunction();">Executar JavaScript</a>

Este método é bem parecido com os exemplos apresentados, embora desta maneira a página não irá subir. Mesmo assim o código continua sendo obstrutivo.

2
  • Porque você recomenda usar o button? Qual seria a vantagem?
    – Joao Paulo
    25/02/2014 às 21:36
  • @JoaoPaulo: Semanticamente, a tag button é a mais recomendada para executar ações e a tag a deve ser utilizada apenas para apontar o usuário para outras páginas, internas ou externas. 26/02/2014 às 16:07
10

Não use nenhuma das opções

Por quê?

Em primeiro lugar, a atribuição do event handler não deve ser feita inline. HTML é para marcação e estruturação de conteúdo, todo o comportamento deve ficar separado, em arquivo(s) JavaScript. Viole esse princípio e verá como é fácil o código virar uma salada (ou, como dizem os gringos, um espaguete).

Portanto, não use onclick="myFunction();". Em vez disso, garanta que o elemento será facilmente acessível via JavaScript, atribuindo a ele um id ou classe (claro que nem isso é necessário para selecionar o elemento em JavaScript, mas costuma ser mais conveniente). O elemento pode ser uma âncora sem href, um simples span, um botão, ou outra coisa que faça sentido. Um <a> sem href é HTML5 válido, mas um href com um valor que não seja URL é inválido. E mesmo que a âncora tenha href, é muito simples evitar via js que o link seja seguido.

Eu usaria o seguinte:

<a id="el" href="http://example.com">Não me siga</a>
// De preferência em arquivo à parte
document.getElementById('el').addEventListener('click', function(e){
     // Não siga o link!
     e.preventDefault();
     alert('não segui');
});
9

Não recomendo nenhuma das opções na pergunta, continua a ler para saberes porquê.

Para evitar problemas de usabilidade no caso do suporte a JavaScript estar desativado ou no caso do visitante pretender abrir o link numa janela à parte, costumo deixar o tratamento do link a cargo da função responsável por o abrir.

Vamos ver o caso de jQuery e JavaScript

Link que vai funcionar mesmo que o suporte a JavaScript esteja desativado no navegador do visitante:

<a href="minha_pagina.html" id="meuLink">Abrir</a>


Com jQuery

Com jQuery, anexamos um evento de click ao id ou class do link e através do objecto do evento, chamamos o método preventDefault() de forma a evitar que o href seja chamado, dando assim lugar ao código que pretendemos executar.

Exemplo no JSFiddle

$('#meuLink').on('click', function (event) {

    // prevenir comportamento normal do link
    event.preventDefault();

    // código a executar aqui
});


Com JavaScript

Com JavaScript, as coisas já não são tão simples, pois temos que fazer algumas verificações que nos dias de hoje são realizadas pelas frameworks que tanto gostamos.

  1. Esperamos que a janela do navegador tenha terminado de carregar para garântir que vamos conseguir adicionar um evento ao elemento pretendido e evitar a chamada do href.
  2. Vamos identificar o elemento no DOM, neste caso através do id e guardar o mesmo numa variável.
  3. Finalmente, verificamos o suporte que o navegador nos está a disponibilizar para anexar o evento de click ao link.

Exemplo no JSFiddle.

// Esperar que a "window" tenha terminado de carregar
window.addEventListener('load', function() {

  // apanhar o elemento para uma variável
  var element = document.getElementById('meuLink');

  // verificar suporte e reagir em conformidade
  if (element.addEventListener) {
      element.addEventListener('click', minhaFuncao, false);
  } else if (element.attachEvent) {
      element.attachEvent('onclick', minhaFuncao);
  }
}, false);

E a função minhaFuncao fica assim:

function minhaFuncao(e) {
    // prevenir comportamento normal do link
    e = e || window.event;
    e.preventDefault();

    // código a executar aqui
}

Nota: Nos exemplos dados, experimentar usar o botão direito do rato para abrir o link num separador ao lado e assim comprovar se a usabilidade está intacta!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .