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

Question

Bonjour à tous,
je reviens vers vous pour trouver une solution à un problème que j'ai simplifié 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...

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... Aucune idée n'est stupide alors hésité pas.

alexflex25 · Accepted Answer

Bonjour,

Il n'y a aucune fonction anonyme?
Il y a 3 méthodes de l'objet "essai" dont le constructeur. Plus une fonction "OtherSimpleFunction"
Ou alors je n'ai pas compris ce que tu as dis...

(Dans le cas ou j'ai compris voici ma réponse à ton poste...)

La méthode "this.ThisMethod()" est bien appelé par la méthode "this.callThisMethod()" a cause du bind(this) de la ligne

document.addEventListener("click",this.callThisMethod.bind(this),false);

Donc ajouter un attribut référencent l'objet lui même n'y change rien...

En revanche 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!


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');


Merci kazma de la réflexion apporté sur le sujet!

@karamel · Answer

et si tu evite de passer par une fonction anonyme pour appel l'autre fonction sa donne quoi 


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);
}
}



il me semble que le this de la fonction anonyme n'est pas celui du prototype si c'est le cas il faudrait definir une variable qui contiendrait une reference au this


var lui=this

callThisMethod : function(){
lui.ThisMethod();
},

RemoveEventListener: 22 lignes; 22 heures de réflexions; 0 solution (ZERO)

2 réponses

Votre réponse

Discussions similaires