1

Estava tentando fazer com que ao clicar em um Link HTML <a></a> executa-se uma função javascript, tive a priori a seguinte ideia atrelar um atributo onclick na tag <a> desta forma:

<a href="#" onclick="funcao()">OnClick</a>  

Porem deste modo há ao ser clicado a página volta ao topo do scroll.

Pergunta: Como acionar uma função javascript sem haver este scroll (sem haver qualquer efeito, transparente para o usuário)?

3
  • 1
    <a href="javascript:void(0)" onclick="funcao()">OnClick</a>, não lembro agora, mas desta forma não funciona? Commented 3/11/2015 às 15:58
  • @GuilhermeLautert não testei desta forma :-(
    – Ricardo
    Commented 3/11/2015 às 16:18
  • @Sanção, não conhecia os pointer-events, já valeu o dia. Commented 3/11/2015 às 17:22

2 Respostas 2

3

Como a pergunta não possui uma tag jQuery, então resolvi adicionar esta resposta em contraste a do Ricardo.

var meuLink = document.getElementById("meuLink");
meuLink.addEventListener("click", function(event) {
   event.preventDefault();
});
<a id="meuLink" href="http://pt.stackoverflow.com/">Stackoverflow em Portugues</a>  

Então para cancelar o redirecionamento, você apenas precisa adicionar a seguinte linha no corpo do metodo:

event.preventDefault();
2
  • Boa resposta, não adicionei jquery por displicencia, mas já o fiz, na minha resposta usei jquery e somente javascritp, (eu fiz e respondi minha pergunta :-) ). +10
    – Ricardo
    Commented 3/11/2015 às 16:21
  • @Ricardo, eu particularmente não de JavaScript inline (problemas com legibilidade, acessibilidade, tamanho da pagina, falta de cache, e manutenibilidade), então não usuaria href="javascript:funcao()" ou onclick="funcao", outro ponto do return false; do jQuery, é que ele faz uso de um event.preventDefault() e do event.stopPropagation(), e neste caso apenas o preventDefault é necessário e o stopPropagation pode vir a introduzir problemas. Commented 3/11/2015 às 16:29
2

Pode-se usar basicamente duas formas:

<a href="javascript:funcao()">Href</a>  

Indicar que deseja executar uma função javascript no atributo href.

OU

Adicionar um id ao link

<a href="#" id="executa-funcao">ID</a>

e usar um listener atrelado ao id

OBS: Adicionar um return false; para que não haja o sequencia no comportamento padrão do link, neste caso o redirecionamento para o topo do documento.

$('#executa-funcao').click(function(){
    //FAZ ALGUMA COISA
    return false;
});

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .