Link âncora HTML - href e onclick?

93

Quero criar uma tag âncora que execute algum JavaScript e prossiga para ir aonde quer que esteja hreflevando. Invocar uma função que executa meu JavaScript e, em seguida, define window.locationou top.locationpara o hreflocal não funciona para mim.

Então, imagine que tenho um elemento com id "Foo" na página. Quero criar uma âncora semelhante a:

<a href="#Foo" onclick="runMyFunction(); return false;">Do it!</a>

Quando clicado, desejo executar runMyFunction e então pular a página para #Foo(não causar uma recarga - usar top.locationfaria com que recarregasse a página).

Sugestões? Fico feliz em usar jQuery se puder ajudar aqui ...

— psicótico
fonte

return true;é a solução, mas você também pode ligar location.hash = '#Foo'. Não irá recarregar a página.

— shuangwhywhy

130

Em return truevez disso?

O valor de retorno do onClickcódigo é o que determina se a ação clicada inerente do link é processada ou não - retornar falsesignifica que não foi processado, mas se você retornar true, o navegador continuará a processá-lo depois que sua função retornar e irá para a seção adequada âncora.

— Âmbar
fonte

1

E se onclick não retornar nada?

— maciek

1

@maciek então o valor de retorno undefinedé considerado falso para esses propósitos.

— Amber

1

No passado, sempre que eu usava uma função js para iniciar uma nova página e colocava apenas um "#" para o atributo href, eu retornava "-1" para evitar a ação padrão, que geralmente é o salto do navegador no topo da página, ou às vezes eu simplesmente não retornava nada. Ultimamente, tive que revisar todas essas páginas como @Amber aconselhou ... para retornar especificamente falso, se eu não quiser que a página salte.

— Randy

1

@Amber parece que se onclick não retornar nada, a ação de clique inerente do link será processada.

— iplus26

Além disso, você não deve usar event.preventDefault () no manipulador de eventos de clique.

— Ruben

36

<a href="#Foo" onclick="return runMyFunction();">Do it!</a>

e

function runMyFunction() {
  //code
  return true;
}

Desta forma, você terá sua função executada E você seguirá o link E você seguirá o link exatamente após sua função ter sido executada com sucesso.

— n1313
fonte

1

Não parece funcionar se sua função retornar true após uma chamada de função adiada?

— DavidVdd

7

Se o link só mudar de local se a execução da função for bem-sucedida, faça onclick="return runMyFunction();"e na função você retornaria verdadeiro ou falso.

Se você deseja apenas executar a função e deixar a tag âncora fazer seu trabalho, simplesmente remova a return falseinstrução.

Como uma observação lateral, você provavelmente deve usar um manipulador de eventos, já que JS embutido não é uma maneira muito ideal de fazer as coisas.

— Peirix
fonte

0

Ao fazer uma estrutura HTML limpa, você pode usar isso.

//Jquery Code
$('a#link_1').click(function(e){
  e . preventDefault () ;
  var a = e . target ;
  window . open ( '_top' , a . getAttribute ('href') ) ;
});

//Normal Code
element = document . getElementById ( 'link_1' ) ;
element . onClick = function (e) {
  e . preventDefault () ;
  
  window . open ( '_top' , element . getAttribute ('href') ) ;
} ;

<a href="#Foo" id="link_1">Do it!</a>

Expandir trecho

— Carl James Omandam
fonte