Discussion :

[16gsyncro]

Bonsoir tout le monde,

J'essaye d'apprendre à faire du js en objet mais là ça coince et je ne comprend vraiment pas pourquoi...
C'est une classe qui récupère les coordonnées de la souris, et la console Firefox renvoie une erreur : "this.getPos is not a function" dans la fonction init();
Le code :

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
var Tracking = {
	xy : [],
	allpos : [],
	event : null,
	init : function(e) {
		this.event = (!e) ? window.event : e;
		this.getPos();
	},
	getPos : function() {
		if (this.event.pageX || this.event.pageY) {
			this.xy = [e.pageX, e.pageY];
		} else if (this.event.clientX || this.event.clientY) {
			this.xy = [
				e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,
				e.clientY + document.body.scrollTop + document.documentElement.scrollTop
			];
		}
		this.addPos();
		alert(this.xy[0]+'-'+this.xy[1]);
	},
	addPos : function() {
		this.allpos.push(this.xy);
	}
};

J'ai tenté avec un namespace mais c'est pareil :

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
var Tracking = function() {
	var xy, allpos, event;
	function getPos() {
		if (this.event.pageX || this.event.pageY) {
			this.xy = [e.pageX, e.pageY];
		} else if (this.event.clientX || this.event.clientY) {
			this.xy = [
				e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,
				e.clientY + document.body.scrollTop + document.documentElement.scrollTop
			];
		}
		this.addPos();
		alert(this.xy[0]+'-'+this.xy[1]);
	}
	function addPos() {
		this.allpos.push(this.xy);
	}
	return {
		init : function(e) {
			this.xy = [];
			this.allpos = [];
			this.event = (typeof(e) == 'undefined') ? window.event : e;
			this.getPos();
		}
	};
 
}();

Et c'est initialisé comme ça :

Code :

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

addEvent(window.document, 'mousemove', Tracking.init);

Voyez-vous d'où ça peut venir ?

Merci d'avance pour votre aide !

[emmanuel.remy]

Salut,

Bienvenue sur les forums de dvp.com.

Ton souci est lié au contexte du this.

Quand tu inscris

Code :

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

addEvent(window.document, 'mousemove', Tracking.init);

c'est la fonction Tracking.init qui est référencée et non l'objet lui-même. Donc quand ton code se déclenche sur le mousemove, le this référence l'objet document concerné par le mousemove; et comme document.getPos(...) n'existe pas .

Ecris plutôt:

Code :

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

addEvent(window.document, 'mousemove', function(e) { Tracking.init(e); });

Note aussi que lecode de ta fonction getPos est erroné: tu mêles event et e alors que ce sont les mêmes et que e n'a jamais été défini. Ce sera ton second plantage en perspective.

Plutôt écrire quelque chose comme:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
	getPos : function() {
	  var e= this.event;
		if (e.pageX || e.pageY) {
			this.xy = [e.pageX, e.pageY];
		} else if (e.clientX || e.clientY) {
			this.xy = [
				e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,
				e.clientY + document.body.scrollTop + document.documentElement.scrollTop
			];
		}
		this.addPos();
		console.log(this.xy[0]+'-'+this.xy[1]);
	},

Bon dev,

ERE

[16gsyncro]

Ah ok ! Je comprend mieux le pourquoi de comment.
Merci infiniment ça fonctionne impeccable, enfin... Tu es un chef !