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

Messages postés
106
Date d'inscription
vendredi 29 septembre 2006
Statut
Membre
Dernière intervention
6 mars 2012
- - Dernière réponse : alexflex25
Messages postés
106
Date d'inscription
vendredi 29 septembre 2006
Statut
Membre
Dernière intervention
6 mars 2012
- 7 avril 2011 à 18:25
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.
Afficher la suite 

Votre réponse

2 réponses

Meilleure réponse
Messages postés
106
Date d'inscription
vendredi 29 septembre 2006
Statut
Membre
Dernière intervention
6 mars 2012
3
Merci
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!

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 139 internautes nous ont dit merci ce mois-ci

Commenter la réponse de alexflex25
Messages postés
1694
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
17 mai 2019
39
0
Merci
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();
},
Commenter la réponse de @karamel

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.