removeEventListener: 22 lignes; 22 heures de réflexions; 0 solution (ZERO) [Résolu]

[alexflex25]

Bonjour à tous je suis tout nouveau sur le forum.
J'espère que je pourrai apporter de l'aide à beaucoup personnes. Mais également que vous pourrez m'aider...

j'ai simplifié mon problème au maximun...
En règle général la solution me vient rapidement quand le problème est simplifié, mais là ...

Mes compétences ne suffise plus...

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
 
var essai = Class.create();
essai.prototype = {
 initialize : function(texte){
  this.texte = texte;
  document.addEventListener("click",this.callThisMethod.bind(this),false);
  document.addEventListener("click",OtherSimpleFunction,false);
 },
 callThisMethod : function(){
  this.ThisMethod();
 },
 ThisMethod : function(){
  alert(this.texte);
  //Le problème se trouve donc ICI, juste là...
  //Pourquoi la ligne ci-dessous ne fonctionne pas
  document.removeEventListener("click",this.callThisMethod.bind(this),false);
 }
}
 
function OtherSimpleFunction(){
 alert('Hello, Just One Time');
 document.removeEventListener("click",OtherSimpleFunction,false);	
}
 
var a = new essai('Hello, Forever ... Grrrrr');

La recette est simple:
- Un page vide
- On ajoute le code Javascript
- On clique une fois dans le document
- Nous avons donc deux alert "Hello, Forever ... Grrrrr" et "Hello, Just One Time"
- (Tous va très bien jusque là...)
- On clique à nouveau (parce qu'on aime bien cliquer)
- (C'est là que tout va mal)
- Le message alert "Hello, Forever ... Grrrrr"

Je ne comprend pas pourquoi, alors que je suis supposé l'avoir enlevé comme le premier...
Avez-vous une piste?

De mon coté je penche pour "la référence incorrecte sur la fonction callThisMethod de la méthode ThisMethod utilisé dans pour faire le removeEventListener"! Mais ou est Charlie? (la bonne référence!)

Merci beaucoup d'avance pour votre aide...

[alexflex25]

la nuit m'a porté conseil... Voici une solution qui me convient parfaitement.
Il faut ajouter un référence sur la méthode ("binder") puisque "bind" fais une copie de la méthode donc la référence change

Au final voici le code qui fonctionne!

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
 
var essai = Class.create();
essai.prototype = {
	initialize : function(texte){
		this.texte = texte;
		//Ligne astucieuse
		this.callThisMethodBound = this.callThisMethod.bind(this);
		document.addEventListener("click",this.callThisMethodBound,false);
		document.addEventListener("click",OtherSimpleFunction,false);
	},
	callThisMethod : function(){
		this.ThisMethod();
	},
	ThisMethod : function(){
		alert(this.texte);
		document.removeEventListener("click",this.callThisMethodBound,false);
	}
}
 
function OtherSimpleFunction(){
	alert('Hello, Just One Time');
	document.removeEventListener("click",OtherSimpleFunction,false);	
}
 
var a = new essai('Hello, Forever ... Grrrrr');