Comment savoir quel élément à lancer l'événement ?

Alors j'ai donc dans un script qui est lancé au chargement de la page
Code:

1 2 3 4 5 6 7 8 document.getElementsByName('produit')[0].addEventListener("mousedown",clicglisse, false); document.getElementsByName('produit')[1].addEventListener("mousedown",clicglisse, false); document.getElementsByName('produit')[2].addEventListener("mousedown",clicglisse, false); document.getElementsByName('produit')[3].addEventListener("mousedown",clicglisse, false); document.getElementsByName('produit')[4].addEventListener("mousedown",clicglisse, false); document.getElementsByName('produit')[5].addEventListener("mousedown",clicglisse, false); document.getElementsByName('produit')[6].addEventListener("mousedown",clicglisse, false);
et je me demande comment faire pour entrer dans une variable, dans la fonction clicglisse(), l'élément name qui correspond à l'évenement en cour sur clicglisse()(est ce que c'est le [0], [1] ou [2]... ?)

Merci beaucoup à tous ceux qui aurait des suggestions :)

Bonjour,
le name c'est le ".name" ;)

Code:

document.getElementsByName(produit)[0].name

(si produit est une var, sinon : 'produit')

A+

Bonjour :)

oui pardon, petite erreur maintenant corriger, ce n'est donc pas une var. Et donc ma question reste inchangé.

Citation:

Envoyé par Vanish

Et donc ma question reste inchangé :)

Tout comme ma réponse :mrgreen:

A+

... ceci dit, ça te renverra 'produit' systématiquement !
Intérêt ??

A+

Je crois que me suis mal expliqué.

Donc les addevent au dessus sont dans une fonction lancé au chargement de la page.

Et moi je voudrais pouvoir identifier avec une variable, dans la fonction clicglisse (le gestionnaire d'événement) lequel de ces produits à reçu l'action mousedown et donc a lancer l'evenement.
Code:

1 2 3 4 5 clicglisse(e){ var identifiantproduit = ?? ........ .....

Ok.
Alors c'est .id (effectivement réellement unique dans la page)

A+

Disons que je met un id alors :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
function lancement() {
 
document.getElementById('produit1').addEventListener("mousedown",clicglisse, false);
document.getElementById('produit2').addEventListener("mousedown",clicglisse, false);
document.getElementById('produit3').addEventListener("mousedown",clicglisse, false);
document.getElementById('produit4').addEventListener("mousedown",clicglisse, false);
document.getElementById('produit5').addEventListener("mousedown",clicglisse, false);
document.getElementById('produit6').addEventListener("mousedown",clicglisse, false);
document.getElementById('produit7').addEventListener("mousedown",clicglisse, false);
}
 
function clicglisse(e){
var produitquialancerlevenement = ??
........
........
}

je ne comprend pas comment faire pour le savoir, y aurait il une propriété de l'event qui donnerait l'element à la source de son lancement par exemple?

Merci beaucoup de t'interresser à mon probleme :)

Y a peut-être + simple : si c'est une liste de radio, par ex.

Code:

document.forms['nom_form'].produit.value

te renverra 0, 1 ... suivant celui cliqué : plus besoin de passage de paramètres ...

A+

En fait c'est un panier drag&drop, j'ai reussi a faire un script qui fonctionne bien, donc avec un seul produit ça donne sa (sans les fioritures

code html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<html>	
	<head>
		<title>Deplacement de fenetres</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script src="data/system/javascript.js" type="text/javascript"></script>		
	</head>
 
	<body onload="debut()">
		<div id="presentation">
 
			<div name="produit" id="produit1" style="top:15px; left:15px; width:90px; height:60px;"><a href="index.php?page=produit1"><div class="leproduit">Produit 1</div><img src="data/images/produit1trespetit.jpg" alt="produit1" /></a></div>
 
 
<div id="caddie1" style="top:458px; left:120px; width:685px; height:65px;"><div id="titrecaddie1">caddie1</div></div>
 
</div>
 
</body>
 
</html>

le javascript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
 
function EcrireCookie(nom, valeur) {
	var argv=EcrireCookie.arguments;
	var argc=EcrireCookie.arguments.length;
	var expires=(argc > 2) ? argv[2] : null;
	var path=(argc > 3) ? argv[3] : null;
	var domain=(argc > 4) ? argv[4] : null;
	var secure=(argc > 5) ? argv[5] : false;
	document.cookie=nom+"="+escape(valeur)+
	((expires==null) ? "" : ("; expires="+expires.toGMTString()))+
	((path==null) ? "" : ("; path="+path))+
	((domain==null) ? "" : ("; domain="+domain))+
	((secure==true) ? "; secure" : "");
}
 
function getCookieVal(offset) {
	var endstr=document.cookie.indexOf (";", offset);
	if (endstr==-1) endstr=document.cookie.length;
	return unescape(document.cookie.substring(offset, endstr));
}
 
function LireCookie(nom) {
	var arg=nom+"=";
	var alen=arg.length;
	var clen=document.cookie.length;
	var i=0;
	while (i<clen) {
		var j=i+alen;
		if (document.cookie.substring(i, j)==arg) return getCookieVal(j);
		i=document.cookie.indexOf(" ",i)+1;
		if (i==0) break;
	}
	return null;
}
 
function EffaceCookie(nom) {
	date=new Date;
	date.setFullYear(date.getFullYear()-1);
	EcrireCookie(nom,null,date);
}
 
//creation des variables contenant left et top des produits (bug IE)
var newX1;
var newY1;
//creation des variables cookies
var imgproduit1 = LireCookie("compteproduit1");
if (imgproduit1 == null) imgproduit1 = 0;
//creation variable contenant la quantite des produits dans le caddie
var quantit1 = 1;
//differenciation IE6 et précédent et autres explroateurs
var ie = (document.all)? true:false;
var ns6 = (document.getElementById)? true:false;
 
//fonction au démarrage, inialisée dans le body
 
function debut() {	
//Recherche et lecture du cookie qui garde le panier itnact		
	for (var nombrephotos1=0 ; nombrephotos1 < imgproduit1 ; nombrephotos1++) {
		var baliseimgproduit1 = document.createElement("img");
		var imageproduit1 = document.createAttribute("src");
		imageproduit1.nodeValue = "data/images/produit1petit.jpg";
		baliseimgproduit1.setAttributeNode(imageproduit1);
		document.getElementById("caddie1").appendChild(baliseimgproduit1);
	}
	if (imgproduit1 > 0) {
	var produit1 = document.createTextNode("produit1");
	document.getElementById("nomproduit1").appendChild(produit1);
	var quantite1cookie = document.createTextNode("x"+imgproduit1);
	document.getElementById("quantiteproduit1").appendChild(quantite1cookie);
	var prix1cookie = document.createTextNode(imgproduit1*3.5);
	document.getElementById("prixduproduit1").appendChild(prix1cookie);
	var euros = document.createTextNode(" euros");
	document.getElementById("prixduproduit1").appendChild(euros);
	}
			if (ie) {
//recuperation coordonnées des produits
		divtop1=produit1.style.top;
		divleft1=produit1.style.left;
		//mise en place des evenements possibles
		document.getElementById("produit1").onmousedown= clicglisse1;
	}else if (ns6) {
		divtop1=document.getElementById("produit1").style.top;
      	divleft1=document.getElementById("produit1").style.left;
		document.getElementById("produit1").addEventListener("mousedown",clicglisse1, false);
	}
}
 
//fonction qui enregistre coordonnees de la souris et appelle les fonctions de glisser lacher
function clicglisse1(e) {
	if (ie) {
		window.lastX=event.clientX;
		window.lastY=event.clientY;
		document.onmousemove=Glisse1;
		document.onmouseup=stopGlisse1;
	}else if (ns6) {
            window.lastX=e.clientX;
            window.lastY=e.clientY;
            window.onmousemove=Glisse1;
            window.onmouseup=stopGlisse1; 
	}
}
 
//fonction qui permet au produit1 de suivre la souris quand le bouton est presser
function Glisse1(e) {
	if (ie) {
//recuperation dans les variables des changements de position de la souris 
		var difX=event.clientX-window.lastX;
      		var difY=event.clientY-window.lastY;
	}else if (ns6) {
		var difX=e.clientX-window.lastX;
      		var difY=e.clientY-window.lastY;
	}
//assignation de nouvelles coordonnees à produit1
      newX1 = parseInt(document.getElementById("produit1").style.left)+difX;
      newY1 = parseInt(document.getElementById("produit1").style.top)+difY;
      document.getElementById("produit1").style.left=newX1+"px";
      document.getElementById("produit1").style.top=newY1+"px";
	if (ie) {
//mise a jour des coordonnees de la souris
            window.lastX=event.clientX;
            window.lastY=event.clientY; 
	}else if (ns6) {
            window.lastX=e.clientX;
            window.lastY=e.clientY; 
	} 
}
 
//fonction qui gerent tout les evenement lorsque que l on relache la souris
function stopGlisse1() {
	if (ie) {
//reinitialisation des evenements
		document.onmousemove=null;
		document.onmousedown=null;
		document.onmouseup=null;
	}else if (ns6){
            window.onmousemove=null;
		window.onmousedown=null;
		window.onmouseup=null;
	}
//calcul de la zone ou le relachement du produit1 entrenera de nouveaux evenements
	X1caddie1 = parseInt(document.getElementById("caddie1").style.left)-parseInt(document.getElementById("produit1").style.width)+10;
	X2caddie1 = parseInt(document.getElementById("caddie1").style.left)+parseInt(document.getElementById("caddie1").style.width)-10;
	Y1caddie1 = parseInt(document.getElementById("caddie1").style.top)-parseInt(document.getElementById("produit1").style.height)+10;
	Y2caddie1 = parseInt(document.getElementById("caddie1").style.top)+parseInt(document.getElementById("caddie1").style.height)-10;
//si produit1 est dans la zone active  recuperation de la quantite actuelle  calcul du prix en fonction de la quantite
	if (((newX1 > X1caddie1) && (newX1 < X2caddie1)) && ((newY1 > Y1caddie1) && (newY1 < Y2caddie1))) {
		var quantite1 = "x"+quantit1;     
		var quantiteA1 = document.createTextNode(quantite1);
		var prixproduit1 = quantit1*3.5;
		var prixproduitA1 = document.createTextNode(prixproduit1);
		var euros = document.createTextNode(" euros");
//ajout de limage dans caddie1
		var baliseimgproduit1 = document.createElement("img");
		var imageproduit1 = document.createAttribute("src");
		imageproduit1.nodeValue = "data/images/produit1petit.jpg";
		baliseimgproduit1.setAttributeNode(imageproduit1);
		document.getElementById("caddie1").appendChild(baliseimgproduit1);
		imgproduit1++;
		date=new Date;
		date.setMonth(date.getMonth()+6);
		EcrireCookie("compteproduit1", imgproduit1, date);	
//si le produit est deja present dans la liste caddie
		if (document.getElementById("nomproduit1").hasChildNodes()) {
//mise a jour de la quantite
			var divcaddie2 = document.getElementById("caddie2");
			var olddivquantite1 = document.getElementById("quantiteproduit1");
			var newdivquantite1 = document.createElement("div");
			newdivquantite1.appendChild(quantiteA1);
			var iddivquantite1 = document.createAttribute("id");
			iddivquantite1.nodeValue = "quantiteproduit1";
			newdivquantite1.setAttributeNode(iddivquantite1);
			divcaddie2.replaceChild(newdivquantite1, olddivquantite1);
//mise a jour du prix
			var olddivprix1 = document.getElementById("prixduproduit1");
			var newdivprix1 = document.createElement("div");
			newdivprix1.appendChild(prixproduitA1);
			var iddivprix1 = document.createAttribute("id");
			iddivprix1.nodeValue = "prixduproduit1";
			newdivprix1.setAttributeNode(iddivprix1);
			divcaddie2.replaceChild(newdivprix1, olddivprix1);
			document.getElementById("prixduproduit1").appendChild(euros);
//incrementation de la variable quantite
			quantit1++;
//si le produit n est pas present dans la liste
		}else {
//affichage du nom du produit et de la quantite initiale
			var produit1 = document.createTextNode("produit1");
			document.getElementById("nomproduit1").appendChild(produit1);
			document.getElementById("quantiteproduit1").appendChild(quantiteA1);
			document.getElementById("prixduproduit1").appendChild(prixproduitA1);
			document.getElementById("prixduproduit1").appendChild(euros);
//incrementation de la quantite
			quantit1++;
		}
	}
//renvoi de l element produit1 en position initiale
		document.getElementById("produit1").style.left=divleft1;
            document.getElementById("produit1").style.top=divtop1;
}

Donc pour mettre plusieurs produits y me suffit autants de addevent dans debut avec clicglisse2, clicglisse3, mais donc 2 produits egal 2 fois tout ce code, et ça grimpe très vite alors j'aimerai apsser la débroussailleuse.

D'ou le besoin de savoir quel produit lance l'evenement pour qu'une seule fonction clicglisse (et idem pr les autres) soit nécessaire).

Dans clicglisse()

Code:

alert(this.id);

ne fonctionne pas ?

A+

Si merveilleusement simple :aie:

Merci mille fois :) je tag resolu.

Sinon mon panier y te parait bien coder? (c un de mes rpemeirs scripts sérieux)

Citation:

Envoyé par Vanish

Sinon mon panier y te parait bien coder? (c un de mes rpemeirs scripts sérieux)

Je t'en prie :)
Quant à la qualité de ton code, à moi il me parait tout à fait correct.

Mais je ne suis pas forcément le plus qualifié pour en juger :mrgreen:

A+