Fonction JS dans balise <a> [Résolu/Fermé]

Signaler
Messages postés
77
Date d'inscription
mercredi 21 octobre 2009
Statut
Membre
Dernière intervention
4 novembre 2009
-
M@dien
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
-
Bonjour je me demandais une chose:

est-ce qu'il est possible de mettre un appel de fonction JS dans un lien <a>?
mais sans que ceci me dirige vers une autre page... difficile je suppose puisque c'est a la base la définition de la balise <a>
ce que je veux faire en fait c'est ajouter un "j'ai oublié mon mot de passe" qui lorsqu'on clique dessus affiche un formulaire demandant l'email dans la meme page.
j'ai deja ma fonction JS mais je veux pas que "j'ai oublié mon mot de passe" soit un boutton (plutot moche :s).

11 réponses

Messages postés
1579
Date d'inscription
mercredi 3 octobre 2007
Statut
Membre
Dernière intervention
23 mars 2020
320
Bonjour, en règle de bonne pratique, je pense que le W3C est celui qu'il faut écouter sur le net, non?
Lire la section 2 de http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-SCRIPT-TECHS-20041008/ et l'exemple 1 extrait de http://www.w3.org/TR/WCAG-TECHS/SCR35.html :

Example 1 :

Link that runs a script and has no fallback for non-scripted browsers. This approach should only be used when script is relied upon as an Accessibility Supported Tecnology.

Even though we do not want to navigate from this link, we must use the href attribute on the a element in order to make this a true link and get the proper eventing. In this case, we're using "#" as the link target, but you could use anything. This link will never be navigated.

The "return false;" at the end of the doStuff() event handling function tells the browser not to navigate to the URI. Without it, the page would refresh after the script ran.

Example Code:


<script>
function doStuff()
{
//do stuff
return false;
}
</script>
<a href="#" onclick="return doStuff();">do stuff</a>




Conclusion : Ne pas mettre les évenments javascript dans le href mais dans un onclick!
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 72330 internautes nous ont dit merci ce mois-ci

Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
Bonjour,

1) Un bouton, c'est un élément maléable au niveau du design, et un peu de CSS peut le rendre comme un lien <a> tout bête.

2) Un lien peut-être contrôlé par javascript oui. pour cela, il faut mettre le code: <a href="#" title="titre" onclick="fonctionJavascript(parametre);">texte du lien</a>
un document.location(...) te permettra de changer de page dans ta fonction.
Messages postés
77
Date d'inscription
mercredi 21 octobre 2009
Statut
Membre
Dernière intervention
4 novembre 2009
10
merci pour ta réponse si rapide je vais chercher et posterais la soluce pour les suivants qui voudraient le faire ;)
Messages postés
77
Date d'inscription
mercredi 21 octobre 2009
Statut
Membre
Dernière intervention
4 novembre 2009
10
en fait ton href="#" march nickel c'est exactement ce que je veux ;)
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
C'est le but. pour appronfondir, le # permet d'accéder aux ancres. Une ancre est ce qui permet d'accéder à une partie de la page via un lien. c'est en fait un lien avec l'attribut "name".
si à un endroit de la page on crée un lien de cette forme:
<a name="ancre" href="#"></a>
On peut accéder à cette ancre avec un autre lien de cette forme:
<a href="page.html#ancre">aller à l'ancre</a>.
C'est ce qui permet de faire les petits boutons "aller en haut de page" ou "aller en bas de page" du site. Ou encore, sur ce forum, "#3" fait référence au 3ème message du topic vu.

De ce fait, si on fait un lien "page.html#ancre", le lien dirigera vers la page en question et ira à l'ancre voulue
Si on fait un lien href="page.html#", on recharge la page,
Si on fait un lien href="#ancre", on ne recharge pas la page, mais on va à l'ancre 'ancre'
Si on fait un lien href="#", on ne recharge pas la page, et on ne va à aucune ancre.

Voilà la petite histoire du # dans les liens.
Messages postés
570
Date d'inscription
mercredi 15 avril 2009
Statut
Membre
Dernière intervention
28 décembre 2009
82
Il est tout de même préférable de mettre le js dans le href, et pas dans un event onclick.

<a href="javascript: uneFonction()">clic !</a>
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
Et quelles sont les raisons pour préférer la version
<a href="javascript: uneFonction()">clic !</a>
à la version
<a href="#" title="titre" onclick="fonctionJavascript(parametre);">clic !</a>


J'ai vu sur ce site: http://www.siteduzero.com/tutoriel-3-102952-bonnes-pratiques-javascript.html , qu'il était préférable de passer par l'évènement onclick, qui est totalement attribué au javascript. Je m'interroge donc sur le pour et le contre des deux méthodes.
P@t@ch0n
Messages postés
570
Date d'inscription
mercredi 15 avril 2009
Statut
Membre
Dernière intervention
28 décembre 2009
82
Les raisons ?

Le but ici est d'utiliser du js non ? Et pas d'utiliser un ancre pour ramener quelque part dans la page, celui qui a son js désactivé se verra à chaque fois qu'il clique sur ce genre de lien ramener en début de page, bien lourdingue...

Là tu mets un ancre parce que tu ne sais pas quoi mettre d'autres dans le href qui est un attribut obligatoire.

Et en ce qui concerne le tuto que tu indiques, bah c'est le site du zéro quoi...

Bien évidemment la meilleure des méthodes à mon sens serait d'écrire les liens avec le js et de proposer une alternative lorsque cela est possible sans javascript, ce qui est le cas de l'auteur de ce sujet avec sa redirection.
M@dien
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74 > P@t@ch0n
Messages postés
570
Date d'inscription
mercredi 15 avril 2009
Statut
Membre
Dernière intervention
28 décembre 2009

Ton argumentation tient la route. Même si je ne reste pas fan des requêtes javascript dans le href...

Et pour ce qui est du site du zéro, je ne me suis pas arrêté qu'à cette vision, et mes recherches n'ont fait que corroborer cette vision des liens javascript.

Cela dit, chacun ses habitudes de travail. L'avantage de liens en href="javascript:function()" est de pouvoir montrer à l'internaute que c'est un lien javascript pur, car cela s'affiche sur la barre d'état du navigateur au survol du lien. Et si la fonction est bien nommée, il est facile de savoir ce que fait le lien.
Messages postés
77
Date d'inscription
mercredi 21 octobre 2009
Statut
Membre
Dernière intervention
4 novembre 2009
10
M@dien merci pour ton explication sur les ancre je connaissais deja mais pas pensé à l'adapter ici...

Quant aux deux différentes syntaxes je pense préférer aussi le onclick mais effectivement c'est intéréssant de savoir laquelle est la plus adaptée je vais jeter un oeil la dessus dès que j'aurais un moment ^^
Messages postés
77
Date d'inscription
mercredi 21 octobre 2009
Statut
Membre
Dernière intervention
4 novembre 2009
10
sinon j'ai lu que c'était correct aussi de le faire sur une balise <span>
Archeus01
Messages postés
1579
Date d'inscription
mercredi 3 octobre 2007
Statut
Membre
Dernière intervention
23 mars 2020
320
Source?
Messages postés
77
Date d'inscription
mercredi 21 octobre 2009
Statut
Membre
Dernière intervention
4 novembre 2009
10
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
C'est possible d'attribuer des évènements sur tous les éléments de la page, du <div> au <span> en passant par le <li>, et ce pour (presque) tous les évènements.

Le seul inconvénient de passer par un <span>, par exemple, est de ne pas avoir le "design" d'un lien par défaut. mais le CSS peut largement palier au problème.