Função JavaScript em href vs. onclick

Mau:

<a id="myLink" href="javascript:MyFunction();">link text</a>

Bom:

<a id="myLink" href="#" onclick="MyFunction();">link text</a>

Melhor:

<a id="myLink" href="#" onclick="MyFunction();return false;">link text</a>

Ainda melhor. 1:

<a id="myLink" title="Click to do something"
 href="#" onclick="MyFunction();return false;">link text</a>

Ainda melhor. 2:

<a id="myLink" title="Click to do something"
 href="PleaseEnableJavascript.html" onclick="MyFunction();return false;">link text</a>

Melhor:

Utilizar o jQuery ou outro enquadramento semelhante para ligar o tratador de onclick pela identificação do elemento.

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

Em termos de javascript, uma diferença é que o this palavra-chave no onclick processador irá referir-se ao elemento DOM cuja onclick atributo é (neste caso, o <a> elemento), considerando this em href atributo referem-se a window objeto.

Em termos de apresentação, se um atributo href estiver ausente de uma ligação (ou seja <a onclick="[...]">) Então, por omissão, os navegadores irão mostrar o cursor text (e não o cursor pointer frequentemente desejado), uma vez que é tratar o <a> como uma âncora, e não como um elo.

Em termos de comportamento, ao especificar uma acção de navegação através href, o navegador irá normalmente suportam a abertura que href em uma janela separada usando um atalho ou menu de contexto. Isto não é possível ao especificar uma acção apenas através de onclick.

No entanto, se você está perguntando Qual é a melhor maneira de obter ação dinâmica a partir do clique de um objeto DOM, em seguida, anexar um evento usando javascript separado a partir do conteúdo do documento é a melhor maneira de ir. Podias fazer isto de várias formas. Uma maneira comum é usar uma biblioteca de javascript como o jQuery para vincular um evento:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<a id="link" href="http://example.com/action">link text</a>
<script type="text/javascript">
    $('a#link').click(function(){ /* ... action ... */ })
</script>

Eu uso

Click <a nohref style="cursor:pointer;color:blue;text-decoration:underline"
onClick="alert('Hello World')">HERE</a>

<style> A {cursor:pointer;color:blue;text-decoration:underline; } </style> 
<a nohref onClick="alert('Hello World')">HERE</a>

A melhor maneira de fazer isto é com:

<a href="#" onclick="someFunction(e)"></a>

O problema é que isto irá adicionar um hash (#) ao fim do URL da Página no navegador, exigindo assim que o utilizador carregue no botão de trás duas vezes para ir para a página antes do seu. Considerando isso, você precisa adicionar algum código para parar a propagação do evento. A maioria das ferramentas de javascript já terá uma função para isso. Por exemplo, o toolkit do dojo usa

dojo.stopEvent(event);

Além de tudo aqui, o href é mostrado na barra de Estado do navegador, e onclick não. Acho que não é fácil mostrar o código javascript lá.

Funcionou para mim usando esta linha de código:

<a id="LinkTest" title="Any Title"  href="#" onclick="Function(); return false; ">text</a>

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

Uma melhor prática seria a segunda maneira, colocar o seu javascript no atributo onclick, que é ignorado se não estiver disponível nenhuma funcionalidade de programação. Coloque um URL válido no campo href (comumente '#') para o recurso para aqueles que não têm javascript.

A resposta de cima é uma prática muito má, nunca se deve ligar a um hash vazio, pois pode criar problemas ao longo da estrada.

O melhor é ligar um manipulador de eventos ao elemento, como muitas outras pessoas afirmaram, no entanto, {[[0]} funciona perfeitamente em cada navegador moderno, e eu uso-o extensivamente ao desenhar modelos para evitar ter que reequilibrar para cada instância. Em alguns casos, esta abordagem oferece um melhor desempenho. MMMV

onclick & href ter comportamentos diferentes ao ligar directamente ao javascript.

onclick vai passar this contexto corretamente, enquanto href não vai, ou em outras palavras <a href="javascript:doStuff(this)">no context</a> não vai funcionar, enquanto <a onclick="javascript:doStuff(this)">no context</a> vai.

O script no atributo "href" não será executado se a diferença de tempo entre 2 cliques for bastante curta.

Por exemplo, tente correr a seguir o exemplo e faça duplo-click (rápido!) em cada link. O primeiro link será executado apenas uma vez. O segundo link será executado duas vezes.

<script>
function myFunc() {
    var s = 0;
    for (var i=0; i<100000; i++) {
        s+=i;
    }
    console.log(s);
}
</script>
<a href="javascript:myFunc()">href</a>
<a href="#" onclick="javascript:myFunc()">onclick</a>

Reproduzido no Chrome (duplo clique) e no IE11 (com triplo clique). No Chrome, se você clicar rápido o suficiente você pode faça 10 cliques e tenha apenas uma execução de função.

Isto funciona

<a href="#" id="sampleApp" onclick="myFunction(); return false;">Click Here</a>

 <hr>
            <h3 class="form-signin-heading"><i class="icon-edit"></i> Register</h3>
            <button data-placement="top" id="signin_student" onclick="window.location='signup_student.php'" id="btn_student" name="login" class="btn btn-info" type="submit">Student</button>
            <div class="pull-right">
                <button data-placement="top" id="signin_teacher" onclick="window.location='guru/signup_teacher.php'" name="login" class="btn btn-info" type="submit">Teacher</button>
            </div>
        </div>
            <script type="text/javascript">
                $(document).ready(function(){
                $('#signin_student').tooltip('show'); $('#signin_student').tooltip('hide');
                });
            </script>   
            <script type="text/javascript">
                $(document).ready(function(){
                $('#signin_teacher').tooltip('show'); $('#signin_teacher').tooltip('hide');
                });
            </script>