Respostas:
<a onclick="jsfunction()" href="#">ou
<a onclick="jsfunction()" href="javascript:void(0);">Editar:
A resposta acima não é realmente uma boa solução, pois aprendi muito sobre JS desde que eu postei inicialmente. Veja a resposta de EndangeredMassa abaixo para obter uma melhor abordagem para resolver esse problema.
JavaScript discreto, sem dependência de biblioteca:
<html>
<head>
<script type="text/javascript">
// Wait for the page to load first
window.onload = function() {
//Get a reference to the link on the page
// with an id of "mylink"
var a = document.getElementById("mylink");
//Set code to run when the link is clicked
// by assigning a function to "onclick"
a.onclick = function() {
// Your code here...
//If you don't want the link to actually
// redirect the browser to another page,
// "google.com" in our example here, then
// return false at the end of this block.
// Note that this also prevents event bubbling,
// which is probably what we want here, but won't
// always be the case.
return false;
}
}
</script>
</head>
<body>
<a id="mylink" href="http://www.google.com">linky</a>
</body>
</html>
hrefcaso de não querer redirecionar o usuário e apenas querer executar algum código? Edit: Eu vejo que ele pode ser em branco esquerdo: href="".
onclickevento via window.onload, em vez de colocar onclickdiretamente na <a>tag?
<a href="javascript:alert('Hello!');">Clicky</a>EDIT, anos depois: NÃO! Nunca faça isso! Eu era jovem e estúpido!
Edite novamente: algumas pessoas perguntaram por que você não deveria fazer isso. Há algumas razões:
Apresentação: o HTML deve se concentrar na apresentação. Colocar JS em um HREF significa que seu HTML está agora, meio que, lidando com a lógica de negócios.
Segurança: o Javascript no seu HTML assim viola a Política de Segurança de Conteúdo (CSP) . A Política de Segurança de Conteúdo (CSP) é uma camada adicional de segurança que ajuda a detectar e mitigar certos tipos de ataques, incluindo XSS (Cross-Site Scripting) e ataques de injeção de dados. Esses ataques são usados para tudo, desde roubo de dados até desfiguração do site ou distribuição de malware. Leia mais aqui .
Acessibilidade: as tags âncora servem para vincular a outros documentos / páginas / recursos. Se o seu link não for a lugar algum, deve ser um botão . Isso torna muito mais fácil para os leitores de tela, terminais braille, etc., determinar o que está acontecendo e fornecer informações úteis aos usuários com deficiência visual.
href='#'e alert()em onclick?
E, por que não ser discreto com o jQuery:
$(function() {
$("#unobtrusive").click(function(e) {
e.preventDefault(); // if desired...
// other methods to call...
});
});
HTML
<a id="unobtrusive" href="http://jquery.com">jquery</a>Javascript discreto tem muitas vantagens, aqui estão os passos necessários e por que é bom usá-lo.
o link é carregado normalmente:
<a id="DaLink" href="http://host/toAnewPage.html"> clique aqui </a>
isso é importante porque ele funcionará para navegadores com javascript não ativado ou se houver um erro no código javascript que não funcione.
o javascript é executado no carregamento da página:
window.onload = function(){
document.getElementById("DaLink").onclick = function(){
if(funcitonToCall()){
// most important step in this whole process
return false;
}
}
}
se o javascript for executado com êxito, talvez ao carregar o conteúdo da página atual com javascript, o retorno false cancelará o acionamento do link. em outras palavras, colocar return false tem o efeito de desativar o link se o javascript foi executado com êxito. Ao permitir que ele seja executado se o javascript não funcionar, faça um bom backup para que seu conteúdo seja exibido de qualquer maneira, para os mecanismos de pesquisa e se o seu código for quebrado, ou seja exibido em um sistema não javascript.
O melhor livro sobre o assunto é "Dom Scription", de Jeremy Keith
Ou, se você estiver usando PrototypeJS
<script type="text/javascript>
Event.observe( $('thelink'), 'click', function(event) {
//do stuff
Event.stop(event);
}
</script>
<a href="#" id="thelink">This is the link</a>
com base na resposta @mister_lucky, use com jquery:
$('#unobtrusive').on('click',function (e) {
e.preventDefault(); //optional
//some code
});
Código HTML:
<a id="unobtrusive" href="http://jquery.com">jquery</a>basta usar javascript: ---- exemplale
javascript:var JFL_81371678974472 = new JotformFeedback({ formId: '81371678974472', base: 'https://form.jotform.me/', windowTitle: 'Photobook Series', background: '#e44c2a', fontColor: '#FFFFFF', type: 'false', height: 700, width: 500, openOnLoad: true })