Surcharge de onclick() et récupération de contexte

Version imprimable

Bonjour à tous,

Je suis parvenu à surcharger (ou surdéfinir je sais pas) la fonction onclick de la manière suivante :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <a href="#" onclick="javascript:alert('onclick non surchargé 0')">Lien 0</a> <br> <a href="#" onclick="javascript:alert('onclick non surchargé 1')">Lien 1</a> <script language="javascript"> for (i=0;i<document.links.length;i++){ document.links[i].onclick = function(){ surchargeMoiCa(); } } function surchargeMoiCa(){ alert("fonction surchargée"); } </script>
Maintenant, il faudrait que lors de ma surcharge je puisse récupérer le contexte de la fonction surchargée (afin de récuperer l'identifiant du lien ou la fonction qui était initialement appelée). Par exemple, j'aimerai bien afficher "fonction surchargée, vous avec cliqué sur le lien 0"

J'ai déja lu quelques post sur la surcharge (notament celui-là), mais aucun ne traitait de la récupération du contexte.

Si quelqu'un pouvait m'aider,

Merci beaucoup

14/03/2008, 16h00
htr999

Citation:

document.links[i].onclick = function(){
surchargeMoiCa();
}

d'apres moi, ceci n'est pas de la surchage de onClick, ce n'est juste l'action que tu définis pour l'onClick sur ton lien !.!
apres pour la récupération, faut voir :)

Ici il s'agit de redéfinir ce que ta méthode va faire :)
en l'occurence ré affecter un évènement sur le onclick ...
pour récupèrer ou gèrer tes donnée je te conseille de passer par une gestion d'objet mais bon ... restons en a ton exemple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <script language="javascript"> for (i=0;i<document.links.length;i++){ var temp = document.links[i].innerHTML; document.links[i].onclick = function(){ surchargeMoiCa(temp); } } function surchargeMoiCa(valeur){ alert("fonction surchargée "+valeur); } </script>
voila :)

suite...
sinon on peut définir tout ce que l'on veut dans <a></a> et récupérer par une fonction

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<head>
<script>
function process(name){
	obj = document.getElementsByName(name);
	attBlaBla = obj[0].getAttribute("blabla");
	attText = obj[0].firstChild.nodeValue;
	alert("attBlaBla="+attBlaBla+" &&\nattText="+attText);
 
}
</script>
</head>
 
<body>
	<a href="#" name="lien1" blabla="Voici Lien 1" onClick="process('lien1');">Lien 1</a>
	<a href="#" name="lien2" blabla="Voici Lien 2" onClick="process('lien2');">Lien 2</a>
</body>

14/03/2008, 16h28
Neocompo

Je te remercie pour ta réponse le_chomeur, malheureusement j'avais déja essayé cette solution mais elle ne marche pas :
Pour reprendre notre exemple, avec ta méthode, que je clique sur le lien 0 ou 1, il m'affichera toujours "fonction surchargée lien 1"
A mon avis cela vient du fait que bien que l'affectation de l'évenement s'effectue au chargement de la page, les arguments ne sont chargés dans la fonction que lorsque je clique sur le lien. Et forcément, à ce moment là, temp vaut "lien 1" car la boucle for s'était terminée.
J'espère être compréhensible...

J'ai choisi cet exemple pour illustrer simplement mon problème, ceci dit, le_chomeur, tu me parle de gestion d'objet, qu'entends-tu par là ? Je n'hésiterai pas à changer de méthode si à la fin je parviens faire ce que je veux réellement faire :
Lorsqu'un utilisateur clique sur un lien de la page, je veux exécuter une fonction (de vérification d'authentification, transparante pour le user) juste avant d'exécuter celle contenue dans le lien.
L'idée de la surcharge à pour interêt d'être élégante en ce qu'elle m'évite de retoucher au code existant pour y rajouter 36 appels à ma fonction de vérification. Mais cela nécéssite de récuperer le contexte.

Citation:
Envoyé par htr999
suite...
sinon on peut définir tout ce que l'on veut dans <a></a> et récupérer par une fonction
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <head> <script> function process(name){ obj = document.getElementsByName(name); attBlaBla = obj[0].getAttribute("blabla"); attText = obj[0].firstChild.nodeValue; alert("attBlaBla="+attBlaBla+" &&\nattText="+attText); } </script> </head> <body> <a href="#" name="lien1" blabla="Voici Lien 1" onClick="process('lien1');">Lien 1</a> <a href="#" name="lien2" blabla="Voici Lien 2" onClick="process('lien2');">Lien 2</a> </body>
J'étais en train de répondre à le_chomeur quand t'as écris ce message. Si tu vois la fin du message que lui ai écris, tu y verra que le but de tout ça est justement de ne pas modifier le code qui se trouve dans les liens. D'où l'interêt du onclick() "surchargé"

14/03/2008, 16h45
htr999

Citation:

but de tout ça est justement de ne pas modifier le code qui se trouve dans les liens

je ne vois pas trop de quel lien tu veux parler ?.?

Citation:

<a href="#" name="lien1" blabla="Voici Lien 1" onClick="process('lien1');">Lien 1</a>

ce qui est dans href="#" ??? dans name, blabla, ou le text, ou le parametre envoyé à la process() ???

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
		for (i=0;i<document.links.length;i++){
		ancienFct=document.links[i].onclick;
			document.links[i].onclick = function(){
				surchargeMoiCa();			
				setTimeout(ancienFct,0);			
			}
		}
 
		function surchargeMoiCa(){
			alert("fonction surchargée");
		}

14/03/2008, 16h58
Neocompo
Citation:

Envoyé par htr999

je ne vois pas trop de quel lien tu veux parler ?.?

ce qui est dans href="#" ??? dans name, blabla, ou le text, ou le parametre envoyé à la process() ???

Voila ce que je veux dire :
Soit une page déja écrite contenant deux liens
Code:

1 2 3 4 <a href="#" onclick="javascript:alert('onclick non surchargé 0')">Lien 0</a> <br> <a href="#" onclick="javascript:alert('onclick non surchargé 1')">Lien 1</a>
Peu importe si ces liens ont + ou - d'attributs.

Le but est de faire executer une autre fonction (qu'on va appeler surchargeMoiCa()) que celle contenue dans le onclick() lorsque le user clique sur un de ces deux liens. Il faut pouvoir faire cela sans modifier quoique ce soit dans le code de ces liens (ne pas rajouter ma fonction surchargeMoiCa() dans le onClick(), ne pas modifier la fonction qui s'y trouve actuellement etc...).
Pour ça, j'y suis arrivé en surchargeant la fonction (voir le tout premier post)

Maintenant, la nouvelle difficulté est de savoir quel lien à appelé surchargeMoiCa(). C'est ce qu'on appelle récuperer le contexte. Et là je n'y arrive pas.

je n'ai aps compris l'intérèt de ton setTimout Mathieu2000

Sinon pour ma gestion d'objet :
il faudrait créer une collection de tes liens, et a chacun leur ajouter une propriété de type : ancienneFunction / newFunction

puis sans modifier ton code html mais juste ta méthode :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 for (i=0;i<document.links.length;i++){ var ancienFct=document.links[i].onclick; //Je ne te donne que l'algo ... ;) //- création d'un nouveau lien //- ajout de sa propriété : ancienne fonction //- Ajout du lien a la collection // traitement de la nouvelle fonction ... document.links[i].onclick = function(){ surchargeMoiCa(this); } } //Puis dans ta fonction function surchargeMoiCa(MoiMême){ //Recherche des propriétés de MoiMême dans la collection précédemment créé // affectation a une variable par exemple : // var ancienneFonction = ancienne fonction ( provenant de l'objet de la collection alert("fonction surchargée" + ancienneFonction ); }
Voila tu as les grandes lignes , regarde sur ce forum hier j'ai expliqué comment créer une collection d'objet :)

Citation:
Envoyé par Matthieu2000
Code:

1 2 3 4 5 6 7 8 9 10 11 12 for (i=0;i<document.links.length;i++){ ancienFct=document.links[i].onclick; document.links[i].onclick = function(){ surchargeMoiCa(); setTimeout(ancienFct,0); } } function surchargeMoiCa(){ alert("fonction surchargée"); }
?
Arf dommage, j'y croyais moi aussi !!
Malheureusement le résultat est le même que pour le_chomeur

merci quand même

14/03/2008, 17h05
DoubleU

Il te faut utiliser un gestionnaire d'évènements dans ce cas la.
14/03/2008, 17h10
Neocompo
Citation:
Envoyé par le_chomeur

Code:

1 2 3 4 5 6 // traitement de la nouvelle fonction ... document.links[i].onclick = function(){ surchargeMoiCa(this); } }
Il faudra que je teste ça, mais je pense avoir compris les grandes lignes.

Cependant est ce que tu es sûr que le this fera bien référence à l'i-ème lien ? (Et non au dernier). Parcequ'à chaque fois que je passe un argument dans surchargeMoiCa(), il correspond toujours à celui de la dernière itération de la boucle for .....
14/03/2008, 17h12
marts

On peut utiliser plusieurs fonctions répondant à un même évènement sur un même objet grâce à

Code:

addEventListener

.
14/03/2008, 17h32
Matthieu2000

Citation:

ancienFct=new Array();
for (i=0;i<document.links.length;i++){
ancienFct[i]=document.links[i].onclick;
document.links[i].onclick = function(){
surchargeMoiCa();
index=0;
for (k=0;k<document.links.length;k++){
if(this==document.links[k]){index=k;};
}
setTimeout(ancienFct[index],0);
}

}

function surchargeMoiCa(){
alert("fonction surchargée");

}

:idea:

Je m'excuse sincèrement de mon absence, nous avons rencontré des problèmes à un autre endroit de notre projet et j'ai du délaisser cette histoire de surcharge pendant un instant.

Matthieu2000, je t'adore, t'as trouvé la solution a mon problème !!

J'avais déja essayé d'utiliser l'objet this, mais en faisant un alert() sur celui-ci, cela m'affichait le chemin d'accès à mon fichier, donc j'avais laissé tomber.
En voyant ton exemple fonctionner, j'ai décidé de creuser un peu plus : la véritable valeur de this apparait lorsqu'on l'affiche avec un console.log() (d'ailleurs à ce sujet, je vous conseil vivement d'utiliser l'extension Firebug pour Firefox, ça aide beaucoup), je peux alors recuperer le contexte.

Pour info, j'ai repris ton code pour le modifier (un tout petit peu), voila ce que ca donne :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 index=0; ancienFct=new Array(); for (i=0;i<document.links.length;i++){ ancienFct[i]=document.links[i].onclick; document.links[i].onclick = function(){ for (k=0;k<document.links.length;k++){ if(this==document.links[k]){index=k;break;}; } surchargeMoiCa(index); } } function surchargeMoiCa(key){ console.log("surchargeMoiCa key= "+key); // Ici on peut faire ce qu'on veut // Dans le cas d'une vérification de droits on vérifie ici si l'utilisateur à le droit de cliquer sur ce lien // Si il a le droit, on peut executer la fonction qu'il souhaitait setTimeout(ancienFct[key],0); }
Y'a peut etre moyen de l'améliorer pour éviter cette double boucle .... mais je chercherai ça plus tard.

Merci sincèrement à tous pour vos conseils.

Salut tout le monde. Je cherchais également une solution à ce problème et je suis tombé sur ce forum.
Moi je te propose une solution plus rapide et moins gourmande (car pas de bouclage inutile). Il suffit de passer par une fonction intermédiaire.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 var links = document.getElementsByTagName('a'); for (var i=0; i<links.length; i++){ overloadLink(links[i], links[i].onclick); } function overloadLink (link, onclickFnc){ link.onclick = function(){ if (false === onclickFnc()){ return false; } alert('Lien surchargé...'); }; }
Voilà pour faire au plus simple. Si ça peut aider quelqu'un... :)