Como usar um link para chamar JavaScript?

166

Como usar um link para chamar o código JavaScript?

javascript Jin Yong
fonte

Respostas:

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

Chelsea
fonte
11
Eu recomendaria o segundo, pois o primeiro rola você até o topo da página.
Matt Grande
7
Sim, definitivamente será, a menos que você adicione um "retorno falso"; após a sua função.
Chelsea
26
Este é o código de 1998. Use uma das soluções discretas. Por favor.
Andrew Hedges
7
Não use nenhum deles! Os links são para links, não são elementos fictícios para chamar javascript.
I.devries
4
se você colocar o javascript embutido, faça o seguinte: <a onclick="jsfunction;return false" href="linkasnormal">
Fire Crow
201

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>
EndangeredMassa
fonte
26
Você pode explicar por que isso é melhor do que a resposta atualmente aceita e para onde o script deve ir na página (porque essa é claramente uma pergunta no nível iniciante)?
Bill o Lagarto
8
Coisa certa. Atualizada.
EndangeredMassa
6
Então, o que devo colocar no 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="".
SabreWolfy
6
Por que é melhor adicionar o onclickevento via window.onload, em vez de colocar onclickdiretamente na <a>tag?
Nathan Reed
10
E se uma de suas preocupações for que você não deseja separar sua unidade funcional de trabalho em diferentes locais físicos no arquivo de origem ou se espalhar por muitos arquivos de origem. Se você colocar uma chamada javascript na sua tag a href, fica dolorosamente claro olhando para uma linha o que está acontecendo. Eu ficaria preocupado em separar essa funcionalidade em diferentes locais físicos, onde é mais difícil obter uma imagem do que está acontecendo. Talvez seja apenas o meu estilo.
stu
47 
<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:

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

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

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

Matt Grande
fonte
16
Talvez alguma descrição dos problemas com este método? É este o pior do que href='#'e alert()em onclick?
Thomas Ahle
3
Eu sou novo para javascript e não entendem o que está errado com este .. Qualquer explicação seria bom
nilanjanaLodh
1
Olá, também não tenho a certeza por que não usar isso? Estou preso em um cenário em que preciso chamar uma função JS, mas tudo o que posso especificar é um link. E sua solução funcionou.
skapie19
43

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>
Senhor Lucky
fonte
2
Isso funcionará para o SEO, de modo que os rastreadores encontrarão o link e o seguirão?
Ahi Tuna
11
porque nem todo mundo usa jquery.
stu
1
@GregMiernicki Sim e não, dependendo do que você quer dizer com link. Veja o HTML. Um webcrawler ou qualquer cliente com o javascript desativado visitará o HREF fornecido. Os clientes habilitados para Javascript executam a ação de clique e ENTÃO seguem o link se essa função não retornar um valor falso ou chamar preventDefault. Nesse caso, o href é um substituto, por isso é chamado de "discreto"
Evan Langlois
12

Javascript discreto tem muitas vantagens, aqui estão os passos necessários e por que é bom usá-lo.

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

  1. 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;
               }
        }
 }

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

Corvo de fogo
fonte
9

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>
Mark Biek
fonte
1
Eu amo não ter que colocar funções de manipulação de eventos em linha.
27410 Mark Biek
1
É o único caminho a percorrer. Por favor vote nas respostas em linha. É uma prática para a qual não há desculpa nos dias de hoje.
Andrew Hedges
5
@ Andrew: Por favor, deixe um comentário junto com seu voto explicando por que as respostas in-line são ruins.
Bill o Lagarto
8

Eu acho que você pode usar o onclickevento, algo como isto:

<a onclick="jsFunction();">
David Z
fonte
0

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>
Mostafa Asadi
fonte
-2

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 })
Domi S Herdian
fonte