Fonction JavaScript dans href vs onclick

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

Est là toute la différence, ou de prestations entre la mise à l'appel JavaScript dans le href attribut (comme ceci:

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

) vs de le mettre dans la onclick attribut (qui le lie à l' onclick événement)?

Cette question a été discutée avant: stackoverflow.com/questions/245868/...
Et stackoverflow.com/questions/134845/...

InformationsquelleAutor SkunkSpinner | 2009-07-01

href javascript

260

Mettre le onclick dans le href irait à l'encontre de ceux qui croient fermement en la séparation du contenu et de comportement/action. L'argument est que votre contenu html devrait continuer de se concentrer uniquement sur le contenu, pas sur la présentation ou le comportement.

Le chemin d'accès standard de ces journées est d'utiliser une librairie javascript (ex. jquery) et de créer un gestionnaire d'événement à l'aide de la bibliothèque. Il ressemblerait à quelque chose comme:
```
$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );
```
- Ou mootools, prototype, dojo ... ou de la plaine sur du javascript, mais ce serait un ensemble beaucoup plus de code, mais en vaut la excercise.
- Si vous n'avez pas à faire quoi que ce soit avec l'objet de l'événement, de la plaine javascript est assez simple. Obtenir le nœud DOM avec obj = document.getElementById(), puis mis en obj.onclick = foo
- ce sujet de la séparation du contenu lorsque le <a href> est généré à la volée, par exemple, dans une fenêtre pop-up, et vous avez encore besoin d'une spéciale sur le comportement?
- Mais n'est-ce pas la question sur la différence entre mettre le JS appel inline dans href contre inline dans onclick? En supposant que vous alliez mettre en ligne pour une raison quelconque, ce qui devrait vous utiliser? (Dans la pratique, je ferais ce que vous l'avez suggéré, mais vous semblez avoir sauté sur la différence entre les deux attributs).
- Le temps que je voudrais plaider pour mettre l'appel de la fonction inline vs avoir un événement onclick du lien est si vous créez dynamiquement des liens dans la page qui s'appellent tous la même fonction, mais ne peut pas avoir des identifiants uniques. J'ai un formulaire où l'utilisateur peut ajouter et supprimer des éléments et j'ai mis le onclick dans le href des liens à l'intérieur de la créé dynamiquement divs si je peux obtenir un démarrage plus rapide sur le traitement du script au lieu d'utiliser quelque chose de moins précis, comme un parent de l'id ou le nom de la classe.
InformationsquelleAutor Parand
940

mauvais:
```
<a id="myLink" href="javascript:MyFunction();">link text</a>
```
bon:
```
<a id="myLink" href="#" onclick="MyFunction();">link text</a>
```
mieux:
```
<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 que return false va empêcher le navigateur d'suivant le lien

meilleur:

Utiliser jQuery ou autre cadre similaire à joindre onclick gestionnaire par l'identification de l'élément.
```
$('#myLink').click(function(){ MyFunction(); return false; });
```
- Il y aurait une autre solution qui serait le meilleur endroit où href n'est pas définie à # mais à un réel lien de la noJS navigateurs.
- ce n'est pas une autre solution, mais une extension du "toujours mieux" point. Dans ce cas, si le navigateur ne supporte pas JavaScript ou qu'il est éteint, puis l'utilisateur sera amené à un avertissement \ page d'explications. Et si le navigateur prend en charge JS alors retourner faux empêcher le navigateur de suivre le lien.
- Que faire si je vous dis que ony la première (mauvaise) on fonctionne de la même façon (à droite) dans tous les navigateurs avec middleclick.
- Dans l'exemple, il semble que le mieux est une alternative à la ci-dessus, cependant, meilleure est la prochaine étape, en utilisant l'un des liens ci-dessus. Meilleur ne peut fonctionner que lorsqu'une balise lien a été cliqué
- javascript:void(0) ne serait pas mieux que # dans votre encore mieux 1 ?
- btw, même mieux que $('#myLink').click(function(){ MyFunction(); return false; }); vous pourriez ajouter à un on fonction, comme ceci: $(document).on('click', ''#myLink', function() { MyFunction(); return false; });
- Ayres - qui n'est pas nécessairement mieux, juste différent. et son "meilleur" n'est pas mieux du tout, juste dans la moyenne. Le mieux serait de dissocier la liaison des événements à partir de la logique d'exécution.
- merci! formidable de voir la conversation. Bon point sur le découplage.
- que faire si les liens sont générés de manière dynamique avec les paramètres? en utilisant un jquery bloc n'est pas la meilleure pratique dans ce cas
- Si nous utilisons onClick, ne fait que le rendre Conforme à ADA?
- Ce qui est mauvais au sujet de <a id="myLink" href="javascript:Mafonction();">?
- Juste mon humble 5 cents: "la meilleure" option serait d'utiliser des boutons pour les clics (événement onclick?) et de laisser des ancres avec leur href vers quoi leur design original intention était, en premier lieu: pour les ancres de liens vers d'autres pages.
- Le sur cliquez sur la liaison avec le javascript a un inconvénient: plus Tard, lorsque votre débogage de quelqu'un d'autre de sa forme, il est vraiment difficile de trouver où et quel type de javascript est obligatoire pour cet élément.
- J'ai trouvé que $('#myLink').cliquez sur(function(){ ne pas intercepter le clic lorsque l'utilisateur choisit d'ouvrir le lien dans un nouvel onglet. Au moins, c'est ce qui se passe dans Firefox.
- Michel Ayres, vous avez raison. href="#" forcera la plupart des navigateurs à la recherche par id et donc de défilement vers le haut de la page. Ce n'est généralement pas souhaitable.
- Pourquoi? si quelqu'un donner quelques détails d'expliquer ou d'un lien web? merci
- à noter que votre "meilleur" ne devrait pas travailler sur une mouche généré <a> élément...
- Que faire si je veux utiliser un bootstrap-confirmation sur mon lien. Le onclick version coutume de travail.
- Je veux ajouter à la meilleur méthode et d'en faire mieux que le meilleur. Déposer l'ensemble a de la balise avec l'inutile href="#" et d'appliquer les onclick gestionnaire directement sur le contenu. Si le contenu est un tag, vous pouvez simplement appliquer la myLink id sur elle. Si le contenu n'est pas une balise, entourent un span tag sur elle et d'appliquer les myLink id de la span. Enfin, dans le CSS, ajouter cursor: pointer;. De cette façon, le lien est très soigné comme un bouton et de ne pas ajouter une vilaine # de l'URL ou de montrer ce vilain # sur le lien info-bulle.
- Arrêt en route de l'événement au début du clic doit être préféré plus de retour faux, puisque tout problème dans votre code javascript va déclencher le href. Ironiquement, le "mauvais" option est la seule sécuritaire pour ce scénario.
- Je suis un développeur Android et j'ai besoin d'exécuter un un lien vers mon application. dans ce cas, votre "mauvaise" solution c'est ma solution. Je ne peux pas appeler mon deeplink dans une fonction javascript depuis cette est bloqué par google chrome sur Android. J'ai besoin d'utiliser un href!
- Veuillez downvote cette réponse dans l'oubli car c'est une très mauvaise pratique. Le lien vers "#" peut avoir des résultats désastreux pour les choses qui dépendent des ancres ou tout simplement de perdre la position de défilement.
- à l'aide de jQuery liaison en fait le pire, on ne se rendront pas compte que si DOM HTML est l'appel d'une fonction de ne cherche pas de fichier javascript. et à l'aide de # aussi mauvais que ça a changé votre structure HTML.
- Quelle est la différence entre le bon et le meilleur exemple, surtout, quel est le return false atteindre?
- mais, pourquoi le mal ? pourquoi les bons ? pourquoi mieux ? pourquoi encore mieux 1 ? pourquoi encore mieux 2 ? pourquoi les meilleures ? si il fonctionne, il fonctionne.
InformationsquelleAutor demp
66

En termes de javascript, une différence est que le this mot-clé dans le onclick gestionnaire reportez-vous à l'élément DOM dont onclick attribut c'est (dans ce cas, le <a> élément), alors que this dans le href attribut reportez-vous à la window objet.

En termes de présentation, si un href attribut est absent à partir d'un lien (c'est à dire <a onclick="[...]">) puis, par défaut, les navigateurs afficheront la text curseur (et pas souvent souhaité pointer curseur), puisqu'il est le traitement de la <a> comme une ancre, et non un lien.

En termes de comportement, lors de la spécification d'une action par la navigation via href, le navigateur va prendre en charge l'ouverture de la href dans une fenêtre séparée à l'aide d'un raccourci ou le menu contextuel. Ce n'est pas possible lors de la spécification d'une action uniquement via onclick.

Cependant, si vous vous demandez quelle est la meilleure façon d'obtenir des dynamiques de l'action de cliquer sur un objet DOM, puis attacher un événement à l'aide de javascript indépendamment du contenu de ce document est la meilleure façon d'aller. Vous pourriez le faire dans un certain nombre de façons. Une façon courante est d'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>
```
- Merci pour la confirmation de mes soupçons que "cela" est différent dans "href" vs "onclick".
InformationsquelleAutor Adam
18

- Je utiliser
```
Click <a nohref style="cursor:pointer;color:blue;text-decoration:underline"
onClick="alert('Hello World')">HERE</a>
```
Un long chemin autour de lui, mais il fait le travail. utiliser Un style de simplifier
ensuite, elle devient:
```
<style> A {cursor:pointer;color:blue;text-decoration:underline; } </style> 
<a nohref onClick="alert('Hello World')">HERE</a>
```
- +1 Vraiment génial! 🙂 Je n'avais jamais entendu parler de nohref attribut avant. C'est le plus logique/moyen élégant pour gérer de tels scripts javascript. Cela est compatible avec FF12 et IE8. Je vais donc remplacer toutes mes href="JavaScript:void(0);" par nohref. Merci beaucoup. Des acclamations.
- plus d'infos sur nohref reference.sitepoint.com/html/area/nohref
- il n'est pas soutenu par les principaux navigateurs, pourquoi devrions-nous utiliser? w3schools.com/tags/att_area_nohref.asp
- nohref est une partie de area tag, pas a! Votre exemple est le même que <a onClick="alert('Hello World')">HERE</a>
- Juste un autre "ne pas faire de cet avertissement". C'est complètement non-standard et de mauvais conseils. nohref n'existe pas sur un a tag.
InformationsquelleAutor Clif Collins
11

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

InformationsquelleAutor Kamarey
10

la meilleure façon de le faire est:
```
<a href="#" onclick="someFunction(e)"></a>
```
Le problème est que cela VA ajouter un dièse (#) à la fin de l'URL de la page dans le navigateur, donc exiger de l'utilisateur cliquez sur le bouton deux fois pour aller à la page d'avant la vôtre. Considérant cela, vous devez ajouter un peu de code pour arrêter la propagation de l'évènement. La plupart des boîtes à outils javascript aura déjà une fonction pour cela. Par exemple, le dojo toolkit utilise
```
dojo.stopEvent(event);
```
de le faire.
- Je tiens à avertir que si vous utilisez href="#" le navigateur va chercher un nom de balise d'ancrage et depuis il ne l'a pas trouvé, alors il le fera de la fenêtre pour faire défiler vers le haut de la page, quelque chose qui pourrait ne pas être visible si vous vous êtes déjà au sommet. Pour éviter ce comportement, utilisez: href="javascript:;" à la place.
- Bon point, mais c'est pourquoi j'ai évoqué l'utilisation de dojo.stopEvent() - il va arrêter la propagation de l'évènement/le bouillonnement et le comportement par défaut en cliquant sur le point d'ancrage.
- Au lieu de stopEvent, pourquoi ne pas simplement renvoyer false (onclick="someFunction(e);return false;")
InformationsquelleAutor linusthe3rd
8

il a travaillé pour moi à l'aide de cette ligne de code:
```
<a id="LinkTest" title="Any Title"  href="#" onclick="Function(); return false; ">text</a>
```
InformationsquelleAutor Omar Yassin Carcelen
7

Avoir javascript: dans n'importe quel attribut qui n'est pas spécifiquement pour le script est une ancienne méthode de HTML. Bien que, techniquement, cela fonctionne, vous êtes toujours à l'attribution de propriétés javascript non script attribut, ce qui n'est pas une bonne pratique. Il peut même échouer sur les anciens navigateurs, ou même de quelques modernes (googlé un post sur le forum nous a semblé indiquer que l'Opéra n'aime pas 'javascript:' url).

Une meilleure pratique serait le deuxième moyen, mettez-y votre code javascript dans le onclick attribut, qui est ignoré si aucune fonctionnalité de script est disponible. Placer une URL valide dans le href champ (communément '#') pour la solution de repli pour ceux qui n'ont pas javascript.
- Je ne vois pas comment il n'y a aucune différence entre un 'javascript:' href et un '#' href avec un attribut onclick. Les deux sont tout aussi inutiles pour les navigateurs sans JS activé.
- harto, qui n'est pas vraiment correct. '#' est un indicateur pour un nom de lien, il n'est pas un javascript identificateur. C'est une URL valide, et ne nécessite pas de Javascript pour être reconnu.
InformationsquelleAutor zombat
7

La réponse sommet est une très mauvaise pratique, on ne devrait jamais le lien à un hachage vide, car il peut créer des problèmes sur la route.

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

Un autre fait intéressant tid bits....

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

onclick va passer this contexte correctement, alors que href n'est pas, ou en d'autres termes <a href="javascript:doStuff(this)">no context</a> ne fonctionne pas, alors que <a onclick="javascript:doStuff(this)">no context</a> volonté.

Oui, j'ai omis le href. Tout en qui ne correspond pas à la spécification, il fonctionne dans tous les navigateurs, même si, idéalement, il devrait inclure un href="javascript:void(0);" pour faire bonne mesure

InformationsquelleAutor Eduardo
5

Cela fonctionne
```
<a href="#" id="sampleApp" onclick="myFunction(); return false;">Click Here</a>
```
- Bienvenue à Débordement de Pile! Alors que cet extrait de code, peut-être de résoudre la question, y compris une explication aide vraiment à améliorer la qualité de votre post. Rappelez-vous que vous répondez à la question pour les lecteurs dans l'avenir, et ces personnes pourraient ne pas connaître les raisons de votre code suggestion. Veuillez aussi essayer de ne pas surcharger le code avec des commentaires explicatifs, car cela réduit la lisibilité à la fois le code et les explications!
- Ce code ne fonctionne pas. retour:faux n'est pas valide. Il devrait être de retour faux.
- vous avez une bonne vue, monsieur, merci pour ça.
InformationsquelleAutor TitusMix
4

Personnellement, je trouve que mettre des appels javascript dans la balise HREF ennuyeux. D'habitude je ne fais pas vraiment attention à savoir si ou non quelque chose est un lien javascript ou pas, et très souvent l'envie d'ouvrir les choses dans une nouvelle fenêtre. Lorsque j'essaie de le faire avec un de ces types de liens, j'obtiens une page blanche avec rien et javascript dans ma barre d'adresse. Cependant, ce n'est éludée un peu à l'aide d'un onlick.

InformationsquelleAutor Peter
3

Une chose que j'ai remarqué lors de l'utilisation de "href" javascript:

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

Par exemple, essayez l'exemple suivant et double-cliquez sur (rapide!) sur chaque lien.
Le premier lien sera exécutée qu'une seule fois.
Le deuxième lien sera exécuté à deux reprises.
```
<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 dans Chrome (double clic) et IE11 (avec un triple clic).
Dans google Chrome, si vous cliquez sur assez rapide, vous pouvez faire 10 clics et ont seulement 1 exécution de la fonction.

Firefox fonctionne ok.

InformationsquelleAutor kolobok

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

InformationsquelleAutor Andrew

1

Tout d'abord, l'url dans href est meilleur parce qu'il permet aux utilisateurs de copier des liens, ouvrir dans un autre onglet, etc.

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

Typique De La Méthode Bind

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 la séparation de balisage et de comportement et de ne pas répéter les appels de fonction dans chaque lien.

Pas De Méthode Bind

Si vous ne voulez pas de se lier à chaque fois, cependant, vous pouvez utiliser onclick et passer dans l'élément et de l'événement, par exemple:
```
<a href="https://www.google.com/" onclick="return Handler(this, event);">Google</a>
```
Et ce 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 dans les nouveaux liens (par exemple via AJAX) chaque fois que vous le voulez sans avoir à vous soucier de la liaison de tous les temps.

InformationsquelleAutor jchavannes
0

J'ai constaté que le javascript: hrefs ne fonctionne pas lorsque la page a été intégré dans les Perspectives de la page web où un dossier de messagerie est configuré pour afficher plutôt une url

InformationsquelleAutor Christian

Vous devez vous connecter pour publier un commentaire.

Typique De La Méthode Bind

Pas De Méthode Bind