Discussion :

[dragonfly]

Bonjour à tous,

Je débute en POO javascript et j'ai un soucis que je ne sais pas résoudre.

Voici ma classe :

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
 
function souris(){
	this.top=0;
	this.left=0;
	// Variables servant a prendre les coordonnées de la souris	
 
	// Fonction permettant de connaitre la position de la souris
	this.posSouris = function(){
		if(navigator.appName.substring(0,3) == "Net") //Pour Netscape
        	 document.captureEvents(Event.MOUSEMOVE);
    	document.onmousemove = this.position;
	}
 
	// Fonction permettant de savoir ou se trouve la souris
	this.position = function(e){
		this.left = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
		this.top = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
	}
 
}

je créé un objet souris ainsi

Code :

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

1
2
 
var souri = new souris();

L'appel a ma fonction souris se fait ainsi:

Code :

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

1
2
 
<img id="circu" onmouseout="var obj = new img("inv"); obj.cache(); " onmouseover="var obj = new img("inv");obj.chgSource("/image/index/circui.jpg"); souri.posSouris();obj.chgPos(souri.top,souri.left); obj.affiche(); " src="/image/index/circu.gif"/>

Le probléme s'est que au passage de la souris sur l'image une autre image doit s'afficher ou la souris se trouve mais elle s'affiche en 0;0 (coordonnées par défaut de mon objet souris).

Si lors de "souri.posSouris();" je fais un alert j'ai bien la position de la souris mais quand je passe a la fonction "obj.chgPos... " un alert me renvoi 0;0 soit la position par défaut de ma souris.

Je ne comprends pourquoi les variables se sont réinitialisées...
HELP plz ... MICI

[Djakisback]

Salut,
en fait c'est un problème de contexte et pas de réinitialisation. this dans ta fonction anonyme ne désigne pas l'objet souris mais ta fonction elle même donc left et top de ton instance ne prennent jamais une autre valeur que 0.
Jette un coup d'oeil du côté d'apply() ou call() pour rétablir ton contexte. Plus d'infos ici.

Vu que dans ton cas il s'agit d'un objet unique, une seule souris par fenêtre, tu pourrais également te débrouiller pour déclarer/accéder globalement à souri dans window, ex (fonctionne IE, FF, moins propre et conflit potentiel de noms de variables) :

Code :

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

1
2
3
4
5
6
7
8
9
10
function souris(){
	this.top = 0;
	this.left = 0;
   	document.onmousemove = function(e){
		window.myMouse.left = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
		window.myMouse.top = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
	}
	window.myMouse = this;
}
var souri = new souris();

D'autre part, quittes à tester le navigateur autant le faire une seule fois plutôt qu'à chaque mouvement de souris, tu peux associer onmousemouve à telle ou telle fonction en fonction de ton test de navigateur.

Bye

[denisC]

en fait c'est un problème de contexte et pas de réinitialisation. this dans ta fonction anonyme ne désigne pas l'objet souris mais ta fonction elle même donc left et top de ton instance ne prennent jamais une autre valeur que 0.

this désigne le contexte d'execution, donc certainement l'element HTML qui est à la base de l'évenement.

Pour plus d'information :
http://t-templier.developpez.com/tut...ipt-poo1/#L2.3
(le petit paneau jaune)

Pour la résolution :
http://t-templier.developpez.com/tut...ipt-poo3/#L2.2

[Djakisback]

Effectivement c'était un peu flou pour moi, merci pour ces précisions.
Dans le premier code posté, les valeurs sont belles et bien stockées dans document.left et document.top.

[Shinuza]

this désigne le contexte d'execution, donc certainement l'element HTML qui est à la base de l'évenement.

Pour plus d'information :
http://t-templier.developpez.com/tut...ipt-poo1/#L2.3
(le petit paneau jaune)

Pour la résolution :
http://t-templier.developpez.com/tut...ipt-poo3/#L2.2

Javascript permet d'étendre les types

Code :

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

1
2
3
4
5
6
Function.prototype.bind = function(objet) { 
    var self = this;
    return function() { 
        return self.apply(objet, arguments); 
    } 
}

[Djakisback]

Est-ce que quelqu'un pourrait montrer comment faire avec l'exemple du onmousemove au-dessus sans utiliser de fonction bind(), directement avec apply() ?

[dragonfly]

Re tous,

Merci pour vos réponses,

j'ai compris pourquoi cela ne fonctionne pas mais je n'arrive pas à le mettre en place, j'ai essayé ceci :

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
21
22
23
24
25
26
27
 
Function.prototype.bind = function(object) {
	var __method = this;
	return function() {
		return __method.apply(object, arguments);
	}
}
// Création de la classe
function souris(){
	this.top;
	this.left;
	// Variables servant a prendre les coordonnées de la souris	
 
	// Fonction permettant de connaitre la position de la souris
	this.posSouris = function(){
		if(navigator.appName.substring(0,3) == "Net") //Pour Netscape
        	 document.captureEvents(Event.MOUSEMOVE);
    	document.onmousemove = this.position;
	}
 
	// Fonction permettant de savoir ou se trouve la souris
	this.position = function(e){
		this.left = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
		this.top = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
	}.bind(this);
 
}

Mais toujours la même chose...

[Shinuza]

Code :

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

1
2
3
4
5
6
7
8
9
10
11
// Création de la classe
function souris(){
	this.top;
	this.left;
	// Variables servant a prendre les coordonnées de la souris	
 
	document.onmousemove = function(event){
		this.left =  event.pageX || event.clientX + document.documentElement.scrollLeft;
		this.top =event.pageY || event.clientY + document.documentElement.scrollTop;
	}.bind(this);
}

Je sais pas comment vous arrivez toujours à trouver des scripts des années 60, mais de nos jours on teste les objets pas le nom du navigateur