0

Gostaria de criar um link com uma imagem, mas que ao clicar nela não dê refresh na página, quero que se clicar não aconteça nada, se eu coloco # a página atualiza, não quero que isso aconteça, quero que clique e nada aconteça, eu estou usando assim:

<a href="#" class="nada"><img src="imagens/icone-construcao.png"></a>

Alguém sabe como fazer isso?
Não encontrei nada no Google que ajudasse.

1

4 Respostas 4

3

Outra opção:

<a href="javascript:void(0)" class="nada">
  <img width="200" src="https://s7d2.scene7.com/is/image/PetSmart/PB1201_STORY_CARO-Authority-HealthyOutside-DOG-20160818?$PB1201$">
</a>

Mais sobre: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/void

2

Utilize o método preventDefault ou stopPropagation. Ele serve para cancelar uma determinação ação.

A diferença entre ambos, é que preventDefault ele cancelará apenas o evento "daquele" elemento que "sofreu" a ação.

stopPropagation, cancelará o evento de todos os elementos filhos.

Exemplo:

document.querySelector("#google").addEventListener("click", ev => {
  ev.preventDefault();
  alert("Você não será redirecionado.")
});

document.querySelector("#sites").addEventListener("click", ev => {
  ev.preventDefault();
  alert("Você não será redirecionado.")
});
<a href="https://www.google.com.br" id="google">Google</a><br>
<a href="https://www.instagram.com" id="intagram">Instagram</a><br>

<div id="sites">
    <a href="https://fb.com">Facebook</a><br>
    <a href="https://twitter.com">Twitter</a>
</div>

Ou você também poderá remover href e adicionar um cursor via CSS.

a {
  cursor: pointer;
}
<a class="nada"><img src="http://via.placeholder.com/350x150"></a>

1

Experimente:

<a href="#!" class="nada"><img src="imagens/icone-construcao.png"></a>
4
  • Essa revisão está louca, Gabriel Carvalho isso msm, colocando #! o link não direciona pra nada, fica sem funcionar. Me resolveu o problema, muito obrigado! Commented 25/02/2018 às 19:27
  • @ClaytonFurlanetto Creio estar enganado. O #! não resolve nada, irá redirecionar para pagina?php#! da mesma forma que apenas "#" irá para pagina?php#.
    – Sam
    Commented 25/02/2018 às 19:33
  • Não sei se é a maneira correta, mas meu problema resolveu, testei nos navegadores mais comuns e funcionou. E pq php? Commented 25/02/2018 às 19:51
  • 1
    @hugocsl, existem diversas formas para se resolver o problema, uma delas é: $(".nada").on("click",function(e){ e.preventDefault(); return false; }); Porém, a solução principal não necessita de conhecimentos em js, é rápida e resolve o problema. Commented 26/02/2018 às 20:31
0

Uma forma é usar event.preventdefault() na no atributo onclick:

<a href="#" onclick="event.preventDefault();" class="nada">
    <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
</a>

Já que está usando classe (.nada) no link, pode usar o CSS para desativar o click:

.nada {
  pointer-events: none;
}

Exemplo:

.nada {
  pointer-events: none;
}
<a href="#" class="nada">
   <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
</a>

O problema do pointer-events é que irá desativar também outros eventos do mouse, como :hover, por exemplo.

Você deve fazer log-in para responder a esta pergunta.

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