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

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; } );

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; });

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>

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>

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.

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.

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

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.

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

<a id="LinkTest" title="Any Title"  href="#" onclick="Function(); return false; ">text</a>

Cela marche

<a href="#" id="sampleApp" onclick="myFunction(); return false;">Click Here</a>

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.

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.

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.

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

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