Fonction JavaScript dans une href vs onclick

Question

Je veux exécuter une fonction JavaScript simple sur un clic sans aucune redirection. Est il appeler toute différence ou prestations entre mettre le code JavaScript dans la attribut (comme ceci : ) vs mettre dans le attribut (en le liant à la événement) ?

Answer 1

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 qu' return false va empêcher le navigateur en suivant le lien

mieux:

Utiliser jQuery ou autre cadre similaire à joindre onclick gestionnaire par l'identification de l'élément.

$('#myLink').click(function(){ MyFunction(); return false; });

Answer 2

Mettre l’onclick dans l’attribut href irait à l’encontre ceux qui croient fermement à la séparation du contenu du comportement/action. L’argument est que votre contenu html doit rester concentré uniquement sur le contenu, et non sur la présentation ou de comportement.

Le chemin d’accès standard de nos jours consiste à utiliser une bibliothèque javascript (eg. jquery) et créez un gestionnaire d’événements à l’aide de cette bibliothèque. Il devrait ressembler à :

Answer 3

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

En termes de présentation, si une href attribut est absent à partir d'un lien (c - <a onclick="[...]">), alors, par défaut, les navigateurs afficheront l' text le curseur (et pas souvent souhaité pointer curseur), puisqu'il est le traitement de l' <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 par l'intermédiaire d' 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>

Answer 4

J’utilise

Un long chemin autour mais il fait le travail. utiliser un A-style pour simplifier alors il devienne :

Answer 5

En plus de tout ici, l’attribut href est présenté sur la barre d’État du navigateur, puis onclick pas. Selon moi, qu'il n’est pas facile de montrer à javascript code là.