Função JavaScript em href vs. onclick
Eu quero executar uma função JavaScript simples em um clique sem qualquer redirecionamento.
Existe alguma diferença ou benefício entre colocar a chamada de JavaScript no atributo href
(como este:
<a href="javascript:my_function();window.print();">....</a>
) vs. colocá-lo no atributo onclick
(ligando-o ao evento onclick
)?
13 answers
O caminho típico nestes dias é usar uma biblioteca de javascript (eg. jquery) e criar um manipulador de eventos usando essa biblioteca. Pareceria algo como:
$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );
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>
Porquê melhor? porque return false
impedirá o browser de seguir a ligação
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>
É um longo caminho, mas faz o trabalho. usar um estilo A para simplificar
depois torna-se:
<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);
Para o fazer.
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
Outro interessante tid-bit....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.
href
. Embora isso não siga o spec, ele vai funcionar em todos os navegadores, embora, idealmente deve incluir um href="javascript:void(0);"
para uma boa medida
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.
O Firefox funciona bem.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>