Fonction JavaScript dans href vs. onclick
Je veux exécuter une fonction JavaScript simple sur un clic sans aucune redirection.
Existe-t-il une différence ou un avantage entre placer l'appel JavaScript dans l'attribut href (comme ceci:
<a href="javascript:my_function();window.print();">....</a>
) contre le placer dans l'attribut onclick (en le liant à l'événement onclick)?
Mettre le onclick dans le href offenserait ceux qui croient fermement en la séparation du contenu du comportement/de l'action. L'argument est que votre contenu HTML doit rester concentré uniquement sur le contenu, pas sur la présentation ou le comportement.
Le chemin typique de nos jours 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; } );
mal:
<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? car return false empêchera le navigateur de suivre le lien
meilleur:
Utilisez jQuery ou tout autre framework similaire pour attacher un gestionnaire onclick par ID d'élément.
$('#myLink').click(function(){ MyFunction(); return false; });
En termes de javascript, une différence est que le mot clé this dans le gestionnaire onclick fera référence à l'élément DOM dont l'attribut onclick est (dans ce cas l'élément <a>), alors que this dans l'attribut href fait référence à l'élément window object.
En termes de presentation, si un attribut href est absent d'un lien (c.-à-d. <a onclick="[...]">), les navigateurs affichent par défaut le curseur text (et non le curseur pointer souvent souhaité), car ils traitent 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 cette href dans une fenêtre distincte à l'aide d'un raccourci ou d'un menu contextuel. Ceci n'est pas possible lorsque vous spécifiez une action uniquement via onclick.
Toutefois, si vous vous demandez quel est le meilleur moyen d'obtenir une action dynamique du clic d'un objet DOM, attacher un événement à l'aide de javascript distinct du contenu du document est la meilleure solution. Vous pouvez le faire de différentes manières. Une méthode courante consiste à utiliser une bibliothèque javascript telle que 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>
J'utilise
Click <a nohref style="cursor:pointer;color:blue;text-decoration:underline"
onClick="alert('Hello World')">HERE</a>
Un long chemin à parcourir, mais le travail est fait. utilisez 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>
la meilleure façon de faire est avec:
<a href="#" onclick="someFunction(e)"></a>
Le problème est que ceci ajoutera un dièse (#) à la fin de l'URL de la page dans le navigateur, obligeant ainsi l'utilisateur à cliquer deux fois sur le bouton Précédent pour accéder à la page précédente. Compte tenu de cela, vous devez ajouter du code pour arrêter la propagation d'événements. La plupart des toolkits javascript auront déjà une fonction pour cela. Par exemple, le toolkit dojo utilise
dojo.stopEvent(event);
faire cela.
En plus de tout ici, le href est affiché sur la barre d'état du navigateur, et onclick pas. Je pense que montrer du code javascript n’est pas convivial.
cela a fonctionné pour moi en utilisant cette ligne de code:
<a id="LinkTest" title="Any Title" href="#" onclick="Function(); return false; ">text</a>
Avoir javascript: dans tout 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. Cela peut même échouer sur les anciens navigateurs, voire sur certains modernes (un post de forum googlé semble indiquer que Opera n'aime pas les URL 'javascript:'.
La deuxième méthode consiste à insérer votre javascript dans l'attribut onclick, qui est ignoré si aucune fonctionnalité de script n'est disponible. Placez une URL valide dans le champ href (généralement '#') comme solution de secours pour ceux qui ne disposent pas de javascript.
Cela marche
<a href="#" id="sampleApp" onclick="myFunction(); return false;">Click Here</a>
La meilleure réponse est une très mauvaise pratique, il ne faut jamais associer un hachage vide, car cela peut créer des problèmes par la suite.
Le mieux est de lier un gestionnaire d’événements à l’élément comme de nombreuses personnes l’ont déjà indiqué. Cependant, <a href="javascript:doStuff();">do stuff</a> fonctionne parfaitement dans tous les navigateurs modernes. Je l’utilise beaucoup lors du rendu des modèles pour éviter de devoir relier chaque instance. Dans certains cas, cette approche offre de meilleures performances. YMMV
Un autre point intéressant ...
onclick & href ont des comportements différents lors de l'appel direct de javascript.
onclick passera le contexte this correctement, alors que href ne 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> le sera.
Oui, j'ai omis la href. Bien que cela ne suive pas les spécifications, cela fonctionnera dans tous les navigateurs, même si, idéalement, il devrait inclure un href="javascript:void(0);" pour faire bonne mesure.
Personnellement, je trouve ennuyeux de placer des appels javascript dans la balise HREF. D'habitude, je ne fais pas vraiment attention à savoir si quelque chose est un lien javascript ou non, et souvent, je veux ouvrir les 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 ne contenant rien et javascript dans la barre d'adresse. Cependant, ceci est évité un peu en utilisant un onlick.
Une dernière 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 sur (rapide!) Sur chaque lien . Le premier lien sera exécuté 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 dans Chrome (double-clic) et IE11 (avec triple-clic) . Si vous cliquez suffisamment rapidement dans Chrome, vous pouvez effectuer 10 clics et exécuter une seule fonction.
Firefox fonctionne bien.
<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>
Premièrement, il est préférable d'avoir l'URL dans href car cela permet aux utilisateurs de copier des liens, de les ouvrir dans un autre onglet, etc.
Dans certains cas (par exemple, des 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 il n'est pas nécessaire de répéter les appels de fonction dans chaque lien.
Aucune méthode de liaison
Cependant, si vous ne voulez pas lier à chaque fois, vous pouvez utiliser onclick et transmettre l'élément et l'événement, par exemple:
<a href="https://www.google.com/" onclick="return Handler(this, event);">Google</a>
Et ceci 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.
J'ai constaté que le javascript: hrefs ne fonctionnait pas lorsque la page était intégrée à la fonctionnalité de page Web d'Outlook dans laquelle un dossier de messagerie est configuré pour afficher une URL.