Tag âncora HTML com evento onclick Javascript

86

Ao usar o Google, descobri que eles estão usando eventos onclick em tags âncora.

Em mais opções na parte do cabeçalho do google, parece uma tag normal, mas ao clicar nela não é redirecionado, mas abre um menu. Normalmente ao usar

<a href='more.php' onclick='show_more_menu()'>More >>></a>

Geralmente vai para 'more.php' sem disparar show_more_menu(), mas mostrei um menu nessa página. Como fazer como o google ?

— smartkid
fonte

117

Se sua função onclick retornar false, o comportamento padrão do navegador será cancelado. Assim sendo:

<a href='http://www.google.com' onclick='return check()'>check</a>

<script type='text/javascript'>

function check()
{
    return false;
}

</script>

De qualquer forma, se o Google faz ou não, não tem muita importância. É mais limpo vincular suas funções onclick ao javascript - dessa forma você separa seu HTML de outro código.

— TJHeuvel
fonte

3

1. Para ter mais certeza, use um # in href = "#" e faça as coisas necessárias dentro do javascript. É seguro clicar nesse link com # href; a página deixa / recarrega o url.

— Bimal Poudel de

4

Siga o conselho acima com cuidado, pois as regras do HTML5 declaram explicitamente que href="#"é para navegar até o topo da página. Você pode simplesmente adicionar o hrefatributo sem conteúdo e obter o comportamento do clique. Definir #como url para páginas reais (em vez de aplicativos de página única com 100% de altura) geralmente é uma má ideia.

— Mike 'Pomax' Kamermans

54

Você pode até tentar a opção abaixo:

<a href="javascript:show_more_menu();">More >>></a>

— sun2
fonte

1

Aviso: se a função retornar qualquer valor explícito (ex:, return null;mas não return;), isso terá consequências indesejadas em alguns navegadores, como o FireFox. A página terá todo o conteúdo substituído pelo valor retornado em formato de string (ex:) [object Object].

— rannmann

45

Pelo que entendi, você não deseja redirecionar quando o link for clicado. Você pode fazer :

<a href='javascript:;' onclick='show_more_menu();'>More ></a>

— Aditya Manohar
fonte

3

Isso é útil quando você não deseja que o href aponte para qualquer lugar.

— kbpontius de

É legal e funciona, mas jquery gera um erro "Erro: erro de sintaxe, expressão não reconhecida: javascript :;"

— TheOddCoder

Estou usando o jQuery versão 1.10.2 e não obtenho o erro de sintaxe que ocorreu com @TheOddCoder.

— Mike Finch

1

Use o seguinte código para mostrar o menu, em vez de ir para href addres

function show_more_menu(e) {
  if( !confirm(`Go to ${e.target.href} ?`) ) e.preventDefault();
}

<a href='more.php' onclick="show_more_menu(event)"> More >>> </a>

Expandir snippet

— Kamil Kiełczewski
fonte