Como chamar a função JavaScript em vez de href em HTML

86

Eu tenho alguns modelos em HTML

<a href="javascript:ShowOld(2367,146986,2)"><img title="next page" alt="next page" src="/themes/me/img/arrn.png"></a>

Recebi a resposta do servidor quando enviei a solicitação.

Com este mockup obtive como resposta uma solicitação AJAX que envia meu código ao servidor.

Bem, está tudo bem mas quando clico no link o navegador quer abrir a função como link; significando que depois de clicar vejo a barra de endereço como

javascript:ShowOld(2367,146986,2)

significa coisa do navegador que é url se eu quiser fazer isso no firebug que funciona. Agora eu quero fazer isso então quando alguém clica no link o navegador tenta chamar a função já carregada no DOM em vez de tentar abri-los no navegador.

javascript html debugging

— Brett DeWoody
fonte

Pergunta semelhante é respondida no próprio Stackoverflow. stackoverflow.com/questions/1070760/…

— Scaria Sebastian

192

Essa sintaxe deve funcionar bem, mas você pode tentar esta alternativa.

<a href="javascript:void(0);" onclick="ShowOld(2367,146986,2);">

ou

<a href="javascript:ShowOld(2367, 146986, 2);">

RESPOSTA ATUALIZADA PARA OS VALORES DE CADEIA

Se você estiver passando strings, use aspas simples para os parâmetros de sua função

<a href="javascript:ShowOld('foo', 146986, 'bar');">

— Dutchie432
fonte

Como passar uma string escapando de aspas duplas nos argumentos? H = O exemplo contém apenas números inteiros.

— jeffry copps

1

@jeffrycopps tente aspas simples dentro de sua função

— ineedme

Resposta @ineedme Atualizado com essas informações. Obrigado.

— Dutchie432

9

Se você tiver apenas um "manipulador de eventos de clique", use um <button>. Um link tem um significado semântico específico.

Por exemplo:

<button onclick="ShowOld(2367,146986,2)">
    <img title="next page" alt="next page" src="/themes/me/img/arrn.png">
</button>

— Felix Kling
fonte

Existe alguma maneira de fazer um botão parecer um link em vez de um botão?

— Ben Page

@Ben Page: Sim, com CSS. Pelo menos você consegue uma boa aproximação. Veja minha resposta e os comentários aqui: stackoverflow.com/questions/4842953/or-javascriptvoid0/…

— Felix Kling

7

Tente tornar o seu javascript discreto:

você deve usar um link real no atributo href
e adicionar um ouvinte no evento de clique para lidar com ajax

— soju
fonte

hrefé opcional, basta omiti-lo.

— Colin 't Hart

Uma tag a é uma âncora; não precisa ter um link.

— Colin 't Hart

5

Eu uso um pouco de CSS em uma extensão para fazer com que pareça um link assim:

CSS:

.link {
    color:blue;
    text-decoration:underline;
    cursor:pointer;
}

HTML:

<span class="link" onclick="javascript:showWindow('url');">Click Me</span>

JAVASCRIPT:

function showWindow(url) {
    window.open(url, "_blank", "directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes");
}

— tolsen64
fonte

O parâmetro de função 'url' acima me fornece a string "url" em vez do url real

— visrahane

Você deve colocar o URL real na função showWindow. Por exemplo: javascript: showWindow (' stackoverflow.com' );

— tolsen64

Não posso codificar isso, pois estou criando usando dom e não tenho controle sobre a url

— visrahane

3

Você também deve separar o javascript do HTML.
HTML:

<a href="#" id="function-click"><img title="next page" alt="next page" src="/themes/me/img/arrn.png"></a>

javascript:

myLink = document.getElementById('function-click');
myLink.onclick = ShowOld(2367,146986,2);

Apenas certifique-se de que a última linha na função ShowOld seja:

return false;

pois isso impedirá que o link seja aberto no navegador.

— portão do Inferno
fonte

hrefé opcional, basta omiti-lo.

— Colin 't Hart

3

<a href="#" onclick="javascript:ShowOld(2367,146986,2)">

— nico
fonte

8

Esta não é a melhor solução, pois isso irá saltar para o topo da página.

— Alex Marshall

Para href em vez de #usarhref="javascript:void(0)

— Narayan

hrefé opcional, basta omiti-lo.

— Colin 't Hart

1

hrefé opcional para aelementos.

É completamente suficiente para usar

<a onclick="ShowOld(2367,146986,2)">link text</a>

— Colin 't Hart
fonte