Enlace de anclaje HTML: ¿href y onclick ambos?

Quiero crear una etiqueta de anclaje que ejecute algo de JavaScript y luego proceda a ir a donde hreflo esté llevando. Invocar una función que ejecuta mi JavaScript y luego establece window.locationo top.locationen la hrefubicación no funciona para mí.

Entonces, imagina que tengo un elemento con id "Foo" en la página. Quiero crear un ancla similar a:

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

Cuando se hace clic en esto, quiero ejecutar runMyFunction y luego saltar la página a #Foo(no causar una recarga, el uso top.locationharía que se recargara la página).

Sugerencias Estoy feliz de usar jQuery si puede ayudar aquí ...

¿Solo en su return truelugar?

El valor de retorno del onClickcódigo es lo que determina si la acción de clic inherente del enlace se procesa o no; regresar falsesignifica que no se procesa, pero si regresa true, el navegador procederá a procesarlo después de que su función regrese y vaya a la ancla.

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

y

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

De esta manera, tendrá su función ejecutada Y seguirá el enlace Y seguirá el enlace exactamente después de que su función se haya ejecutado correctamente.

Si el enlace solo debe cambiar la ubicación si la función se ejecuta correctamente, entonces hágalo onclick="return runMyFunction();"y en la función devolvería verdadero o falso.

Si solo desea ejecutar la función y luego dejar que la etiqueta de anclaje haga su trabajo, simplemente elimine la return falsedeclaración.

Como nota al margen, probablemente debería usar un controlador de eventos en su lugar, ya que JS en línea no es una forma muy óptima de hacer las cosas.

Al hacer una estructura HTML limpia, puede usar esto.

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