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

**Neocompo** · 14/03/2008, 15h53

Bonjour à tous,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**htr999** · 14/03/2008, 16h00

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

**le_chomeur** · 14/03/2008, 16h08

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**htr999** · 14/03/2008, 16h16

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Neocompo** · 14/03/2008, 16h28

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.

**Neocompo** · 14/03/2008, 16h34

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**htr999** · 14/03/2008, 16h45

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

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

**Matthieu2000** · 14/03/2008, 16h50

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

?

**Neocompo** · 14/03/2008, 16h58

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**le_chomeur** · 14/03/2008, 17h02

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Neocompo** · 14/03/2008, 17h02

Envoyé par Matthieu2000

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**DoubleU** · 14/03/2008, 17h05

Il te faut utiliser un gestionnaire d'évènements dans ce cas la.

**Neocompo** · 14/03/2008, 17h10

Envoyé par le_chomeur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**marts** · 14/03/2008, 17h12

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

addEventListener

.

**Matthieu2000** · 14/03/2008, 17h32

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

}

**Neocompo** · 01/04/2008, 16h59

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**tasiot** · 20/07/2009, 15h11

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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... :)

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

JavaScript

Discussions similaires

Partager

Partager