Javascript removeEventListener ne fonctionne pas

Question

J'ai le code suivant pour ajouter un écouteur d'événements

 area.addEventListener('click',function(event) {
              app.addSpot(event.clientX,event.clientY);
              app.addFlag = 1;
          },true);

Cela fonctionne correctement comme prévu.. Plus tard, dans une autre fonction, j'ai essayé de supprimer l'écouteur d'événements en utilisant le code suivant

 area.removeEventListener('click',function(event) {
              app.addSpot(event.clientX,event.clientY);
              app.addFlag = 1;
          },true);

Mais l'écouteur d'événements n'est pas supprimé.. Pourquoi cela se produit-il? Y a-t-il un problème avec mon removeEventListener()? Remarque: Ici, area est quelque chose comme document.getElementById('monId')

Answer 1

Cela est dû au fait que les deux fonctions anonymes sont des fonctions totalement différentes. L'argument de votre removeEventListener n'est pas une référence à l'objet fonction qui était attaché précédemment.

 function foo(event) {
     app.addSpot(event.clientX,event.clientY);
     app.addFlag = 1;
 }
 area.addEventListener('click',foo,true);
 area.removeEventListener('click',foo,true);

Answer 2

Je trouve que pour l'objet windows, le dernier paramètre "true" est requis. La suppression ne fonctionne pas s'il n'y a pas de drapeau de capture.

Answer 3

Dans un composant de fonction React, assurez-vous de définir le callback avec le crochet useCallback(() => {}). Si vous ne le faites pas, le callback sera différent à chaque réexécution et la méthode removeEventListener ne fonctionnera pas.

const scrollCallback = useCallback(() => { // faire qqch. }, []);
window.addEventListener("scroll", scrollCallback, true);
window.removeEventListener("scroll", scrollCallback, true);

Answer 4

Vous créez deux fonctions différentes dans les deux appels. Ainsi, la deuxième fonction n'a aucun lien avec la première et le moteur peut supprimer la fonction. Utilisez un identifiant commun pour la fonction à la place.

var handler = function(event) {
              app.addSpot(event.clientX,event.clientY);
              app.addFlag = 1;
          };
area.addEventListener('click', handler,true);

plus tard, vous pouvez supprimer le gestionnaire en appelant

area.removeEventListener('click', handler,true);

Answer 5

Pour le supprimer, stockez la fonction dans une variable ou utilisez simplement une fonction nommée et passez cette fonction à l'appel de removeEventListener :

function areaClicked(event) {
    app.addSpot(event.clientX, event.clientY);
    app.addFlag = 1;
}

area.addEventListener('click', areaClicked, true);
// ...
area.removeEventListener('click', areaClicked, true);