Lien d'ancrage HTML - href et onclick les deux?

93

Je veux créer une balise d'ancrage qui exécute du JavaScript, puis continue à aller où que ce hrefsoit. L'appel d'une fonction qui exécute mon JavaScript, puis définit window.locationou top.locationà l' hrefemplacement ne fonctionne pas pour moi.

Alors, imaginez que j'ai un élément avec l'identifiant "Foo" sur la page. Je souhaite créer une ancre similaire à:

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

Lorsque vous cliquez dessus, je veux exécuter runMyFunction, puis sauter la page vers #Foo(ne pas provoquer de rechargement - l'utilisation top.locationentraînerait le rechargement de la page).

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

— psychotik
source

return true;est la solution, mais vous pouvez également appeler location.hash = '#Foo'. Cela ne rechargera pas la page.

— shuangwhywhy

130

Juste à la return trueplace?

La valeur de retour du onClickcode est ce qui détermine si l'action cliquée inhérente au lien est traitée ou non - le retour falsesignifie qu'elle n'est pas traitée, mais si vous revenez, truele navigateur procédera à son traitement après le retour de votre fonction et passera à la bonne ancre.

— ambre
source

1

Et si onclick ne renvoie rien?

— maciek

1

@maciek alors la valeur de retour est traitée comme undefinedétant considérée comme fausse à ces fins.

— Ambre

1

Dans le passé, chaque fois que j'utilisais une fonction js pour lancer une nouvelle page et que je mettais juste un "#" pour l'attribut href, je renvoyais "-1" pour empêcher l'action par défaut, qui est généralement le saut du navigateur en haut de la page, ou parfois je ne retournerais rien. Dernièrement, j'ai dû réviser toutes ces pages comme @Amber l'avait conseillé ... pour renvoyer spécifiquement false, si je ne veux pas que la page saute.

— Randy

1

@Amber semble que si onclick ne renvoie rien, l'action cliquée inhérente au lien sera traitée.

— iplus26

Vous ne devez pas non plus utiliser event.preventDefault () sur le gestionnaire d'événements click.

— Ruben

36

<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 a été exécutée avec succès.

— n1313
source

1

Cela ne semble pas fonctionner si votre fonction retourne true après un appel de fonction différé?

— DavidVdd

7

Si le lien ne doit changer d'emplacement que si l'exécution de la fonction réussit, faites-le onclick="return runMyFunction();"et dans la fonction, vous retournerez vrai ou faux.

Si vous souhaitez simplement exécuter la fonction, puis laisser la balise d'ancrage faire son travail, supprimez simplement l' return falseinstruction.

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

— peirix
source

0

Lorsque vous créez une structure HTML propre, vous pouvez l'utiliser.

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

Développer l'extrait

— Carl James Omandam
source