Link âncora HTML - href e onclick?

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 ...

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.

<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.

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.

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>