Javascript links: problema do "onclick" e rolagem da página

Uma das formas mais tradicionais de se inserir chamadas de javascript em um site é através do evento de "onclick" dos links (tags <a>). O motivo desse pequeno tutorial sobre o assunto é mostrar como coisas tão simples podem ser feitas de várias formas, e como nem sempre pensamos em usar a melhor forma possível.

Vamos considerar a forma mais usual de links com "onclick" que vemos por aí:

<a href="#" onclick="javascript:alert('Hello world!');">Clique aqui</a>

O que é chamado no "onclick" pode ser qualquer outra função mais complexa, não é isso que estou querendo discutir aqui. O problema está no atrubuto "href" que permanece com o valor "#". Como todos sabem isso fará com que a barra de scroll do browser retorne ao topo da página, caso estejamos clicando em um link somente após descer um pouco nosso scroll.

Isso é um problema irritante para a grande maioria dos usuários. O "problema desse problema" é que ele não impede a navegação nem causa qualquer outro grande dano a funcionalidade do site, ele apenas irrita... E hoje em dia, usuários irritados vão pensar duzentas e uma vezes em retornar ao seu site.

Agora gostaria de mostrar 3 soluções para esse problema, e depois descrever os prós e os contras de cada uma delas:

Solução 1: manter-se no mesmo lugar

Com essa solução inserimos um ID (#stay) em torno do link (também poderia ser <a name="stay"></a>) e apontamos o "href" do link para ele:

<span id="stay"><a href="#stay" onclick="javascript:alert('Hello world!');">Clique aqui</a></span>

Prós
- É a solução mais simples para um único link do tipo na página.

Contras
- Precisamos criar um ID específico para cada link, pois se dois IDs iguais aparecerem na mesma página, o link irá apontar para o primeiro deles (afora isso, obviamnete seu html não irá validar). Dessa forma não é uma boa solução para quando temos diversos links com "onclick" na mesma página.

Solução 2: usar javascript:undefined no "href"

Com essa solução inserimos no "href" um comando de javascript que na verdade não causa efeito algum:

<a href="javascript:undefined;" onclick="javascript:alert('Hello world!');" onmouseover="javascript:window.status='Este link abre um javascript'; return true" onmouseout="javascript:window.status=''; return true">Clique aqui</a>

Prós
- É uma solução que resolve o problema independente do número de links com "onclick" usados na mesma página.
- Parece ser a solução mais usada na web.

Contras
- A mensagem de status do browser vai mostrar exatamente "javascript:underfined;" ao invés de uma url usual. Para sites com público leigo, isso pode assustar potencialmente, levando a crer que existe "alguma coisa estranha ali naquele link" - isto é, se é que os usuários vão se preocupar com a mensagem de status do browser.
- No exemplo temos inclusive uma tentativa de contornar o problema com mais um pouco de javascript, a questão é que a maioria dos browsers modernos vem configurado para não considerar esse tipo de script de alteração da mensagem de status, por óbvias questões de segurança. Portanto, não parece haver solução para isso.

Solução 3: inserir o "onclick" com return false

Com essa solução informamos ao browser para parar de rodar eventos do link no o "onclick", evitando que o valor do "href" nos leve a qualquer lugar:

<a href="#" onclick="javascript:alert('Hello world!'); return false">Clique aqui</a>

Prós
- É uma solução que resolve o problema independente do número de links com "onclick" usados na mesma página.
- Na minha opnião é a melhor solução.

Contras
- Apesar de simples, não podemos esquecer de utilizar o return false.

Ver exemplos

***

É isso, espero que esse pequeno tutorial tenha lhes ajudado a resolver esse problema em específico; e também a sempre considerar que as soluções usuais e mais usadas nem sempre são as melhores soluções...