chamar a função javascript no clique do hiperlink


Respostas:


133

Mais puro ainda, em vez de typical href="#"ou href="javascript:void"ou href="whatever", acho que isso faz muito mais sentido:

var el = document.getElementById('foo');
el.onclick = showFoo;


function showFoo() {
  alert('I am foo!');
  return false;
}

<a href="no-javascript.html" title="Get some foo!" id="foo">Show me some foo</a>

Se o Javascript falhar, há algum feedback. Além disso, o comportamento errático (salto de página no caso de href="#", visita à mesma página no caso de href="") é eliminado.


13
+1 Esta é atualmente a única resposta discreta. +100 se eu pudesse.
James

@Lewis, sim, o ideal é que as tags <a> não sejam usadas para chamadas js puras, mas infelizmente os navegadores mais antigos não suportam: hover para elementos não vinculados. Portanto, os links costumavam ser usados ​​para acionar eventos js.
Chris Van Opstal

@Chris - Não tenho certeza se você entendeu meu ponto, Chris. Estou sugerindo que você não use <a href="#"> Não fazer nada </a> e, em vez disso, use <a href="a/link/somwhere.html"> Faça algo </a> e depois use aprimoramento progressivo para substituir o href. Esta é a solução mais limpa. Âncoras são boas, mas devem fazer ALGUMA COISA se o javascript estiver desabilitado - ou por algum motivo (como no IE6) algum javascript quebrou antes de o manipulador ser criado e atribuído. Desta forma, todos os seus usuários ficarão felizes.
Lewis

2
Não está funcionando para mim, apenas executa automaticamente a função onclick no carregamento da página. Isso também parece um pesadelo no que diz respeito à acessibilidade.
Shawn Solomon

4
Isso não funciona, apenas direciona você para o url href.
Paddotk

57

A resposta mais simples de todas é ...

<a href="javascript:alert('You clicked!')">My link</a>

Ou para responder à pergunta sobre como chamar uma função javascript:

<script type="text/javascript">
function myFunction(myMessage) {
    alert(myMessage);
}
</script>

<a href="javascript:myFunction('You clicked!')">My link</a>


2
O link no StackOverflow 'Executar trecho de código' não funciona no Firefox (nenhum alerta é criado), mas funciona no FF quando coloco esse tipo de link em uma página da web normal.
the_pwner224

Sim, é estranho, estava funcionando para mim, agora não está. Outros estavam tendo problemas semelhantes e parece não haver uma solução definitiva, além de reinstalar completamente o Firefox.
Jayden Lawson

26

Com o parâmetro onclick ...

<a href='http://www.google.com' onclick='myJavaScriptFunction();'>mylink</a>

declaração confusa. está indo para google.com ou chamando a função javascript? qual tem a prioridade?
Nguai al

12

A resposta JQuery. Como o JavaScript foi inventado para desenvolver JQuery, estou dando um exemplo em JQuery fazendo isso:

<div class="menu">
    <a href="http://example.org">Example</a>
    <a href="http://foobar.com">Foobar.com</a>
</div>

<script>
jQuery( 'div.menu a' )
    .click(function() {
        do_the_click( this.href );
        return false;
    });

// play the funky music white boy
function do_the_click( url )
{
    alert( url );
}
</script>

52
O JavaScript foi inventado para desenvolver o jQuery? Esse é novo!
palswim

35
Era como ler que o Lego foi inventado para construir o Lego Batman.
Shawn Solomon,

5
@ShawnSolomon Estou feliz por concordarmos :)
elcuco

1
@elcuco, ótimo sarcasmo! + 'd :) Long Live JQuery
Zuul

6

Eu prefiro usar o método onclick em vez do href para hiperlinks javascript. E sempre use alertas para determinar qual valor você tem.

<a href='#' onclick='jsFunction();alert('it works!');'>Link</a>

Também pode ser usado em tags de entrada, por exemplo.

<input type='button' value='Submit' onclick='jsFunction();alert('it works!');'>


3

Idealmente, eu evitaria gerar links em seu code behind, pois seu código precisará ser recompilado toda vez que você quiser fazer uma alteração na 'marcação' de cada um desses links. Se você tiver que fazer isso, eu não incorporaria suas 'chamadas' de javascript em seu HTML, é uma prática totalmente ruim, sua marcação deve descrever seu documento, não o que ele faz, esse é o trabalho de seu javascript.

Use uma abordagem em que você tenha um id específico para cada elemento (ou classe, se for sua funcionalidade comum) e, em seguida, use o Aprimoramento progressivo para adicionar o (s) manipulador (es) de eventos, algo como:

[c# example only probably not the way you're writing out your js]
Response.Write("<a href=\"/link/for/javascriptDisabled/Browsers.aspx\" id=\"uxAncMyLink\">My Link</a>");

[Javascript]  
document.getElementById('uxAncMyLink').onclick = function(e){

// do some stuff here

    return false;
    }

Dessa forma, seu código não será interrompido para usuários com JS desativado e terá uma separação clara de preocupações.

Espero que seja útil.


1
Por que C #? Por que não apenas <a href="https://stackoverflow.com/link/for/javascriptDisabled/Browsers.aspx" id="uxAncMyLink">My Link</a>?
Mahmoodvcs

2

Em geral, eu recomendaria usar element.attachEvent (IE) ou element.addEventListener (outros navegadores) em vez de definir o evento onclick diretamente, pois o último substituirá quaisquer manipuladores de eventos existentes para esse elemento.

attachEvent / addEventListening permite que vários manipuladores de eventos sejam criados.


1

Use o onclickatributo HTML .

O onclickmanipulador de eventos captura um evento de clique do botão do mouse dos usuários no elemento ao qual o onclickatributo é aplicado. Esta ação geralmente resulta em uma chamada para um método de script, como uma função JavaScript [...]


1

Se você não esperar que a página seja carregada, você não poderá selecionar o elemento por id. Esta solução deve funcionar para qualquer pessoa que tenha problemas para fazer o código executar

<script type="text/javascript">
window.onload = function() {
    document.getElementById("delete").onclick = function() {myFunction()};

    function myFunction() {
        //your code goes here
        alert('Alert message here');
    }
};
</script>

<a href='#' id='delete'>Delete Document</a>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.