Fonction JavaScript en href vs onclick

475

Je veux exécuter une fonction JavaScript simple sur un clic sans aucune redirection.

Existe-t-il une différence ou un avantage entre le fait d'appeler l'appel JavaScript dans l' hrefattribut (comme ceci:

<a href="javascript:my_function();window.print();">....</a>

) vs le mettre dans l' onclickattribut (le lier à l' onclickévénement)?

SkunkSpinner
la source
5
Cette question a déjà été discutée: stackoverflow.com/questions/245868/…
SolutionYogi

Réponses:

276

Mettre le onclick dans le href offenserait ceux qui croient fortement en la séparation du contenu du comportement / action. L'argument est que votre contenu html doit rester concentré uniquement sur le contenu, pas sur la présentation ou le comportement.

De nos jours, le chemin type consiste à utiliser une bibliothèque javascript (par exemple jquery) et à créer un gestionnaire d'événements à l'aide de cette bibliothèque. Cela ressemblerait à quelque chose comme:

$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );
Parand
la source
1
Ou mootools, prototype, dojo ... ou simple sur javascript, mais ce serait beaucoup plus de code mais ça vaut le coup.
Ryan Florence
15
Si vous n'avez rien à faire avec l'objet événement, le javascript simple est assez simple. Obtenez le nœud DOM avec obj = document.getElementById (), puis définissez obj.onclick = foo
Matt Bridges
1
Qu'en est-il de la séparation du contenu lorsque la <a href> est générée à la volée, par exemple, dans une fenêtre contextuelle, et que vous avez toujours besoin d'un comportement de clic spécial?
Serge
6
Mais la question ne portait-elle pas sur la différence entre mettre l'appel JS en ligne hrefet en ligne onclick? En supposant que vous alliez le mettre en ligne pour une raison quelconque, laquelle devriez-vous utiliser? (En pratique, je ferais ce que vous avez suggéré, mais vous semblez avoir ignoré la différence entre les deux attributs.)
nnnnnn
1
La seule fois où je recommanderais de mettre l'appel de fonction en ligne par rapport à un événement onclick pour le lien, c'est si vous créez dynamiquement des liens dans la page qui appellent tous la même fonction mais qui peuvent ne pas avoir d'ID uniques. J'ai un formulaire Web où l'utilisateur peut ajouter et supprimer des éléments et je place le onclick dans la référence des liens dans les divisions créées dynamiquement afin que je puisse commencer plus rapidement le traitement du script au lieu d'utiliser quelque chose de moins spécifique comme un identifiant relatif ou nom du cours.
MistyDawn
977

mauvais:

<a id="myLink" href="javascript:MyFunction();">link text</a>

bien:

<a id="myLink" href="#" onclick="MyFunction();">link text</a>

meilleur:

<a id="myLink" href="#" onclick="MyFunction();return false;">link text</a>

encore mieux 1:

<a id="myLink" title="Click to do something"
 href="#" onclick="MyFunction();return false;">link text</a>

encore mieux 2:

<a id="myLink" title="Click to do something"
 href="PleaseEnableJavascript.html" onclick="MyFunction();return false;">link text</a>

Pourquoi mieux? parce quereturn false cela empêchera le navigateur de suivre le lien

meilleur:

Utilisez jQuery ou un autre framework similaire pour attacher le gestionnaire onclick par l'ID de l'élément.

$('#myLink').click(function(){ MyFunction(); return false; });
demp
la source
21
Il y aurait une autre solution qui serait la meilleure où hrefn'est pas réglé sur #mais vers un lien réel pour les navigateurs noJS.
helly0d
6
Et si je vous dis que le premier (mauvais) fonctionne de la même manière (à droite) dans tous les navigateurs avec middleclick.
Vloxxity
14
Quel est le problème avec <a id="myLink" href="javascript:MyFunction();">?
Vaddadi Kartick
6
Juste mon humble 5 cents: "la meilleure" option serait d'utiliser des boutons pour les clics (événements onclick?) Et de laisser les ancres avec leurs href à ce que leur intention de conception initiale était en premier lieu: être des ancres pour les liens vers d'autres pages.
nidalpres
4
La liaison au clic avec javascript a un inconvénient: plus tard, lorsque vous déboguez quelqu'un d'autre son formulaire, il est vraiment difficile de trouver où et quel type de javascript se lie à cet élément.
Maarten Kieft
69

En termes de javascript , une différence est que le thismot - clé dans le onclickgestionnaire fera référence à l'élément DOM dont onclickil est l'attribut (dans ce cas l' <a>élément), tandis que thisdans l' hrefattribut fera référence à l' windowobjet.

En termes de présentation , si un hrefattribut est absent d'un lien (c.-à-d. <a onclick="[...]">), Par défaut, les navigateurs afficheront le textcurseur (et non le pointercurseur souvent souhaité ) car il traite le<a> comme une ancre, et non un lien.

En termes de comportement , lors de la spécification d'une action par navigation via href, le navigateur prend généralement en charge l'ouverture de celle-ci hrefdans une fenêtre séparée à l'aide d'un raccourci ou d'un menu contextuel. Cela n'est pas possible lorsque vous spécifiez une action uniquement via onclick.


Cependant, si vous demandez quelle est la meilleure façon d'obtenir une action dynamique à partir du clic d'un objet DOM, attacher un événement en utilisant javascript séparé du contenu du document est la meilleure façon de procéder. Vous pouvez le faire de plusieurs façons. Une façon courante consiste à utiliser une bibliothèque javascript comme jQuery pour lier un événement:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<a id="link" href="http://example.com/action">link text</a>
<script type="text/javascript">
    $('a#link').click(function(){ /* ... action ... */ })
</script>
Adam
la source
9
Merci d'avoir confirmé mes soupçons selon lesquels "ceci" est différent dans "href" vs "onclick".
joonas.fi
17

j'utilise

Click <a nohref style="cursor:pointer;color:blue;text-decoration:underline"
onClick="alert('Hello World')">HERE</a>

Un long chemin, mais il fait le travail. utiliser un style A pour simplifier alors il devient:

<style> A {cursor:pointer;color:blue;text-decoration:underline; } </style> 
<a nohref onClick="alert('Hello World')">HERE</a>
Clif Collins
la source
10
+1 Vraiment super! :-) Je n'avais jamais entendu parler d' nohrefattribut auparavant. C'est la façon la plus logique / élégante de gérer de telles actions javascript. Ceci est compatible avec FF12 et IE8. Par conséquent, je remplacerai tous mes href="JavaScript:void(0);"par nohref. Merci beaucoup. À votre santé.
olibre
7
ce n'est pas pris en charge par les principaux navigateurs, pourquoi devrions-nous l'utiliser? w3schools.com/tags/att_area_nohref.asp
hetaoblog
11
nohreffait partie du areatag, non a! Votre exemple est le même que<a onClick="alert('Hello World')">HERE</a>
nZeus
6
Juste un autre "ne fais pas cet avertissement". C'est un conseil complètement non standard et mauvais. nohrefn'existe pas sur une abalise.
Colin 't Hart
11

En plus de tout ici, le href est affiché dans la barre d'état du navigateur, et onclick pas. Je pense que ce n'est pas convivial pour y afficher du code javascript.

Kamarey
la source
10

la meilleure façon de le faire est de:

<a href="#" onclick="someFunction(e)"></a>

Le problème est que cela ajoutera un hachage (#) à la fin de l'URL de la page dans le navigateur, obligeant ainsi l'utilisateur à cliquer deux fois sur le bouton de retour pour accéder à la page avant la vôtre. Compte tenu de cela, vous devez ajouter du code pour arrêter la propagation des événements. La plupart des boîtes à outils javascript auront déjà une fonction pour cela. Par exemple, la boîte à outils dojo utilise

dojo.stopEvent(event);

faire cela.

linusthe3rd
la source
9
Je voudrais vous avertir que si vous utilisez href="#"le navigateur, il recherchera une balise d'ancrage nommée et qu'il ne la trouvera pas, cela fera défiler la fenêtre vers le haut de la page, ce qui pourrait ne pas être perceptible si vous êtes déjà au sommet. Pour éviter ce comportement, utilisez: à la href="javascript:;"place.
alonso.torres
1
@ alonso.torres Bon point, mais c'est pourquoi j'ai mentionné l'utilisation de dojo.stopEvent () - cela arrêtera la propagation / propagation des événements et le comportement par défaut de cliquer sur l'ancre.
linusthe3rd
7
Au lieu de stopEvent, pourquoi ne pas simplement retourner false (onclick = "someFunction (e); return false;")
stracktracer
10

La meilleure réponse est une très mauvaise pratique, il ne faut jamais créer de lien vers un hachage vide car cela peut créer des problèmes en cours de route.

Le mieux est de lier un gestionnaire d'événements à l'élément, comme l'ont déclaré de nombreuses autres personnes, <a href="javascript:doStuff();">do stuff</a> fonctionne parfaitement dans tous les navigateurs modernes, et je l'utilise largement lors du rendu des modèles pour éviter d'avoir à se lier à nouveau pour chaque instance. Dans certains cas, cette approche offre de meilleures performances. YMMV

Un autre petit morceau intéressant ....

onclick & href ont des comportements différents lors de l'appel direct de javascript.

onclickpassera le thiscontexte correctement, alors que hrefne le fera pas, ou en d'autres termes <a href="javascript:doStuff(this)">no context</a>ne fonctionnera pas, alors que<a onclick="javascript:doStuff(this)">no context</a> fera.

Oui, j'ai omis le href. Bien que cela ne respecte pas les spécifications, cela fonctionnera dans tous les navigateurs, bien que, idéalement, il devrait inclure une href="javascript:void(0);"bonne mesure

Eduardo
la source
8

Ayant javascript: un attribut qui n'est pas spécifiquement destiné aux scripts est une méthode HTML obsolète. Bien que cela fonctionne techniquement, vous attribuez toujours des propriétés javascript à un attribut non script, ce qui n'est pas une bonne pratique. Il peut même échouer sur les anciens navigateurs, ou même sur certains navigateurs modernes (un post googlé sur le forum semble indiquer que Opera n'aime pas les URL 'javascript:').

Une meilleure pratique serait la deuxième façon, de mettre votre javascript dans l' onclickattribut, qui est ignoré si aucune fonctionnalité de script n'est disponible. Placez une URL valide dans le champ href (généralement «#») pour le remplacement pour ceux qui n'ont pas de javascript.

zombat
la source
1
Je ne vois pas de différence entre un href 'javascript:' et un href '#' avec un attribut onclick. Les deux sont également inutiles pour les navigateurs sans JS activé.
harto
2
harto, ce n'est pas vraiment correct. '#' est un indicateur pour un lien nommé, ce n'est pas un identifiant javascript. Il s'agit d'une URL valide et ne nécessite pas la reconnaissance de Javascript.
zombat
8

cela a fonctionné pour moi en utilisant cette ligne de code:

<a id="LinkTest" title="Any Title"  href="#" onclick="Function(); return false; ">text</a>
Omar Yassin Carcelen
la source
7

Cela marche

<a href="#" id="sampleApp" onclick="myFunction(); return false;">Click Here</a>
TitusMix
la source
3
Bienvenue dans Stack Overflow! Bien que cet extrait de code puisse résoudre la question, y compris une explication aide vraiment à améliorer la qualité de votre message. N'oubliez pas que vous répondrez à la question des lecteurs à l'avenir et que ces personnes ne connaissent peut-être pas les raisons de votre suggestion de code. Essayez également de ne pas surcharger votre code avec des commentaires explicatifs, car cela réduit la lisibilité du code et des explications!
Au revoir StackExchange le
2
Ce code ne fonctionne pas. return: false n'est pas valide. Il doit être renvoyé faux.
hbulens
5

Personnellement, je trouve ennuyeux de placer des appels javascript dans la balise HREF. Habituellement, je ne fais pas vraiment attention à savoir si quelque chose est un lien javascript ou non, et souvent je veux ouvrir des choses dans une nouvelle fenêtre. Lorsque j'essaie de le faire avec l'un de ces types de liens, j'obtiens une page vierge sans rien et javascript dans ma barre d'emplacement. Cependant, cela est un peu contourné en utilisant un onlick.

Peter
la source
3

Encore une chose que j'ai remarquée en utilisant "href" avec javascript:

Le script dans l'attribut "href" ne sera pas exécuté si la différence de temps entre 2 clics était assez courte.

Par exemple, essayez d'exécuter l'exemple suivant et double-cliquez (rapidement!) Sur chaque lien. Le premier lien ne sera exécuté qu'une seule fois. Le deuxième lien sera exécuté deux fois.

<script>
function myFunc() {
    var s = 0;
    for (var i=0; i<100000; i++) {
        s+=i;
    }
    console.log(s);
}
</script>
<a href="javascript:myFunc()">href</a>
<a href="#" onclick="javascript:myFunc()">onclick</a>

Reproduit en Chrome (double clic) et IE11 (avec triple clic). Dans Chrome, si vous cliquez assez rapidement, vous pouvez effectuer 10 clics et exécuter une seule fonction.

Firefox fonctionne bien.

kolobok
la source
3

Tout d'abord, il hrefest préférable d' avoir l'URL car elle permet aux utilisateurs de copier des liens, de les ouvrir dans un autre onglet, etc.

Dans certains cas (par exemple, les sites avec des modifications HTML fréquentes), il n'est pas pratique de lier des liens à chaque mise à jour.

Méthode de liaison typique

Lien normal:

<a href="https://www.google.com/">Google<a/>

Et quelque chose comme ça pour JS:

$("a").click(function (e) {
    e.preventDefault();
    var href = $(this).attr("href");
    window.open(href);
    return false;
});

Les avantages de cette méthode sont une séparation nette du balisage et du comportement et n'ont pas à répéter les appels de fonction dans chaque lien.

Aucune méthode de liaison

Si vous ne voulez pas lier à chaque fois, cependant, vous pouvez utiliser onclick et passer l'élément et l'événement, par exemple:

<a href="https://www.google.com/" onclick="return Handler(this, event);">Google</a>

Et cela pour JS:

function Handler(self, e) {
    e.preventDefault();
    var href = $(self).attr("href");
    window.open(href);
    return false;
}

L'avantage de cette méthode est que vous pouvez charger de nouveaux liens (par exemple via AJAX) quand vous le souhaitez sans avoir à vous soucier de la liaison à chaque fois.

jchavannes
la source
1
 <hr>
            <h3 class="form-signin-heading"><i class="icon-edit"></i> Register</h3>
            <button data-placement="top" id="signin_student" onclick="window.location='signup_student.php'" id="btn_student" name="login" class="btn btn-info" type="submit">Student</button>
            <div class="pull-right">
                <button data-placement="top" id="signin_teacher" onclick="window.location='guru/signup_teacher.php'" name="login" class="btn btn-info" type="submit">Teacher</button>
            </div>
        </div>
            <script type="text/javascript">
                $(document).ready(function(){
                $('#signin_student').tooltip('show'); $('#signin_student').tooltip('hide');
                });
            </script>   
            <script type="text/javascript">
                $(document).ready(function(){
                $('#signin_teacher').tooltip('show'); $('#signin_teacher').tooltip('hide');
                });
            </script>   
Andrew
la source
0

J'ai constaté que javascript: hrefs ne fonctionnait pas lorsque la page était incorporée dans la fonctionnalité de page Web d'Outlook où un dossier de messagerie est configuré pour afficher à la place une URL

Christian
la source