Como posso criar uma âncora HTML vazia assim que a página não “saltar” quando eu clicar nele?

StackOverflow https://stackoverflow.com/questions/493175

  •  20-08-2019
  •  | 
  •  

Pergunta

Eu estou trabalhando em alguns JQuery para ocultar / mostrar algum conteúdo quando eu clicar em um link. Eu posso criar algo como: 

<a href="#" onclick="jquery_stuff" />

Mas se eu clicar nesse link, enquanto eu estou rolada para baixo em uma página, ele irá saltar de volta para o topo da página.

Se eu fizer algo como: 

<a href="" onclick="jquery_stuff" />

A página irá recarregar, que livra a página de todas as mudanças que javascript tem feito.

Algo parecido com isto: 

<a onclick="jquery_stuff" />

vai me dar o efeito desejado, mas mostra não mais como um link. Existe alguma maneira de especificar uma âncora vazia para que eu possa atribuir um manipulador de javascript para o evento onclick, sem alterar nada na página ou mover a barra de rolagem?

Foi útil?

Solução

Coloque um "falso retorno"; na segunda opção: 

<a href="" onclick="jquery_stuff; return false;" />

Outras dicas

Você precisa return false; após a jquery_stuff: 

<a href="no-javascript.html" onclick="jquery_stuff(); return false;" />

Esta irá cancelar a ação padrão.

Você pode colocar simplesmente como como abaixo: 

<a href="javascript:;" onclick="jquery_stuff">

jQuery tem uma função incorporada para esse chamado preventDefault que pode ser encontrado aqui: http://api.jquery.com/event.preventDefault/

Aqui está o exemplo: 

<script>
$("a").click(function(event) {
    event.preventDefault();
});
</script>

Você também pode criar um link como este: 

<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>

Verifique eyelidlessness' comment (use um botão, não uma âncora). Estava prestes a publicar o mesmo conselho. Uma âncora que não link para um recurso e apenas executa um script deve ser implementado como um botão.

parar de colocar seus manipuladores de eventos em HTML, e parar de usar marcas de âncora que não servem de âncora fins semânticas. Use um botão e adicione o clique manipulador em sua Javascript. Exemplo: HTML e JavaScript <button id="jquery_stuff">Label</button> $('#jquery_stuff').click(jquery_stuff);. Você pode usar CSS para o estilo botão para olhar como um link, através da remoção de preenchimento, bordas, margens e background-color, em seguida, adicionando seu estilos de link (ex. cor e text-decoration). - eyelidlessness 19 de outubro '10 às 17h40 

<a href="javascript:;" onclick="jquery">link</a>

href requer alguma coisa lá dentro, se você deseja que ele não aparecer erros nos validadores para html. O javascript:; é um espaço reservado bom.

Se você realmente quiser usar o #: 

<a href="#me" name="me" onclick="jquery">link</a>

Tenha cuidado com o return false;, ele pára comportamentos padrão de tudo o que você está fazendo.

Além disso, se seus js é como um enviar você pode executar em problemas no Internet Explorer. 

<a href="javascript:// some helpful comment " onclick="jquery_stuff" />

Eu costumo usar um <span> e estilo que se parecesse com um link quando eu preciso para realizar algo como isto. 

  <a href="#" class="falseLinks">Link1</a>
  <a href="#" class="falseLinks">Link2</a>

etc ..

JQUERY: 

  $(function() {
    $("a.falseLinks").click(function() {
      // ...other stuff you want to do when links is clicked

      // This is the same as putting onclick="return false;" in HTML
     return false;
    })
  });

@eyelidlessness era um douchy pouco na maneira como ele disse, mas ele estava certo. Esta é a forma mais limpa de fazê-lo. Por que usar o jQuery, se você estiver em seguida, vai voltar a baunilha Javascript para o material jQuery faz mais fácil e mais limpo?

Normalmente eu faço: 

<a style="cursor:pointer;" onclick="whatever();">Whatever</a>

Como sobre isto: 

<a href="#nogo" onclick="foo();">some text</a>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top