Enlace de anclaje HTML: ¿href y onclick ambos?

93

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

— psicotik
fuente

return true;es la solución, pero también puedes llamar location.hash = '#Foo'. No recargará la página.

— shuangwhywhy

130

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

— Ámbar
fuente

1

¿Qué pasa si onclick no devuelve nada?

— maciek

1

@maciek, el valor de retorno se trata como si undefinedse considerara falso para estos fines.

— Ámbar

1

En el pasado, cada vez que usaba una función js para iniciar una nueva página y ponía solo un "#" para el atributo href, devolvía "-1" para evitar la acción predeterminada, que generalmente es el navegador saltando hasta la parte superior de la página, oa veces simplemente no devolvía nada. Últimamente he tenido que revisar todas esas páginas como aconsejó @Amber ... para devolver específicamente falso, si no quiero que la página salte.

— Randy

1

@Amber parece que si onclick no devuelve nada, se procesará la acción de clic inherente del enlace.

— iplus26

Además, no debe usar event.preventDefault () en el controlador de eventos de clic.

— Ruben

36

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

— n1313
fuente

1

¿No parece funcionar si su función devuelve verdadero después de una llamada de función diferida?

— DavidVdd

7

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.

— peirix
fuente

0

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>

Expandir fragmento

— Carl James Omandam
fuente