Lien d'ancrage HTML - href et onclick à la fois ?

Question

Je veux créer une balise d'ancrage qui exécute du JavaScript et qui se rend ensuite à l'endroit où se trouve l'utilisateur. href le prenait. En invoquant une fonction qui exécute mon JavaScript et ensuite met window.location ou top.location à la href L'emplacement ne fonctionne pas pour moi.

Imaginons que j'ai un élément avec l'identifiant "Foo" sur la page. Je veux créer une ancre semblable à :

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

Lorsque l'on clique dessus, je veux exécuter runMyFunction et ensuite faire passer la page à l'endroit suivant #Foo (ne pas provoquer un rechargement - en utilisant top.location entraînerait le rechargement de la page).

Des suggestions ? Je suis heureux d'utiliser jQuery si cela peut aider ici...

Answer 1

Juste return true à la place ?

La valeur de retour de la fonction onClick est ce qui détermine si l'action inhérente au lien cliqué est traitée ou non - en retournant false signifie qu'il n'est pas traité, mais si vous retournez le message true alors le navigateur le traitera après le retour de votre fonction et ira vers l'ancre appropriée.

Answer 2

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

et

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

De cette façon, vous aurez votre fonction exécutée ET vous suivrez le lien ET vous suivrez le lien exactement après que votre fonction ait été exécutée avec succès.

Answer 3

Si le lien ne doit modifier l'emplacement que si l'exécution de la fonction est réussie, alors faites ce qui suit onclick="return runMyFunction();" et dans la fonction, vous renverrez true ou false.

Si vous souhaitez simplement exécuter la fonction, puis laisser la balise d'ancrage faire son travail, il suffit de supprimer l'élément return false déclaration.

À titre d'information, vous devriez probablement utiliser un gestionnaire d'événements à la place, car le JS en ligne n'est pas une façon optimale de faire les choses.

Answer 4

Lorsque vous faites une structure HTML propre, vous pouvez utiliser ceci.

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