Eu quero executar uma função JavaScript simples em um clique sem redirecionar.

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

<a href="javascript:my_function();window.print();">....</a>

) vs. colocá-lo no onclickatributo (vinculando-o ao onclickevento)?

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

O caminho típico atualmente é usar uma biblioteca javascript (por exemplo, jquery) e criar um manipulador de eventos usando essa biblioteca. Seria algo como:

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

ruim:

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

Boa:

<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>

Por que melhor? porque return falseimpedirá que o navegador siga o link

melhor:

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

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

Em termos de javascript , uma diferença é que a thispalavra - chave no onclickmanipulador se refere ao elemento DOM cujo onclickatributo é (nesse caso, o <a>elemento), enquanto que thisno hrefatributo se refere ao windowobjeto.

Em termos de apresentação , se um hrefatributo estiver ausente em um link (ou seja <a onclick="[...]">), então, por padrão, os navegadores exibirão o textcursor (e não o pointercursor frequentemente desejado ), pois estão tratando o item <a>como uma âncora e não como um link.

Em termos de comportamento , ao especificar uma ação pela navegação via href, o navegador normalmente suporta a abertura hrefem uma janela separada usando um atalho ou menu de contexto. Isso não é possível ao especificar uma ação apenas via onclick.

No entanto, se você está perguntando qual é a melhor maneira de obter ação dinâmica com o clique de um objeto DOM, anexar 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 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>

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

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

Além de tudo aqui, o href é mostrado na barra de status do navegador e não clica em não. Eu acho que não é fácil mostrar o código javascript lá.

a melhor maneira de fazer isso é com:

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

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

dojo.stopEvent(event);

para fazer isso.

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

O melhor é vincular um manipulador de eventos ao elemento, como muitas outras pessoas declararam, no entanto, <a href="javascript:doStuff();">do stuff</a>funciona perfeitamente em todos os navegadores modernos, e eu o uso extensivamente ao renderizar modelos para evitar a necessidade de religar novamente para cada instância. Em alguns casos, essa abordagem oferece melhor desempenho. YMMV

Outro detalhe interessante ....

onclicke hrefter comportamentos diferentes ao chamar javascript diretamente.

onclickpassará o thiscontexto corretamente, enquanto hrefnão funcionará, ou seja <a href="javascript:doStuff(this)">no context</a>, não funcionará, enquanto <a onclick="javascript:doStuff(this)">no context</a>funcionará.

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

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

Uma prática melhor seria a segunda maneira, de colocar seu javascript no onclickatributo, que será 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.

funcionou para mim usando esta linha de código:

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

Isso funciona

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

Pessoalmente, acho chato fazer chamadas javascript na tag HREF. Normalmente, não presto muita atenção se algo é ou não um link javascript, 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 com nada e javascript na minha barra de localização. No entanto, isso é evitado um pouco usando um onlick.

Mais uma coisa que notei ao usar "href" com javascript:

O script no atributo "href" não será executado se a diferença de horário entre 2 cliques for bastante 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.

<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 (clique duplo) e IE11 (com clique triplo). No Chrome, se você clicar rápido o suficiente, poderá fazer 10 cliques e ter apenas 1 execução de função.

Firefox funciona bem.

Primeiro, hrefé melhor incluir o URL, pois permite aos usuários copiar links, abrir em outra guia etc.

Em alguns casos (por exemplo, sites com alterações frequentes de HTML), não é prático vincular links sempre que houver uma atualização.

Método típico de ligação

Link normal:

<a href="https://www.google.com/">Google<a/>

E algo assim para JS:

$("a").click(function (e) {
    e.preventDefault();
    var href = $(this).attr("href");
    window.open(href);
    return false;
});

Os benefícios desse método são a separação clara de marcação e comportamento e não precisam repetir as chamadas de função em todos os links.

Método sem vinculação

Se você não deseja vincular todas as vezes, no entanto, pode usar onclick e passar o elemento e o evento, por exemplo:

<a href="https://www.google.com/" onclick="return Handler(this, event);">Google</a>

E isso para JS:

function Handler(self, e) {
    e.preventDefault();
    var href = $(self).attr("href");
    window.open(href);
    return false;
}

O benefício desse método é que você pode carregar novos links (por exemplo, via AJAX) sempre que quiser, sem ter que se preocupar em vincular todas as vezes.

 <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>   

Percebi que o javascript: hrefs não funcionava quando a página foi incorporada ao recurso de página da Web do Outlook, onde uma pasta de email está configurada para mostrar um URL