Pourquoi `removeEventListener()` ne fonctionne-t-il pas dans mon code JavaScript ?

Problème de suppression d'EventListener en JavaScript : pourquoi RemoveEventListener() échoue

En JavaScript, les écouteurs d'événements permettent aux développeurs de surveiller les événements d'éléments DOM tels que les clics, les mouvements de souris, etc. plus. Bien qu'attacher un écouteur d'événement soit assez simple, le supprimer peut parfois poser des problèmes.

Le code

Le code d'origine ajoute un écouteur d'événement à un élément nommé zone lorsque vous cliquez dessus.

<code class="javascript">area.addEventListener('click', function(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}, true);</code>

Le problème

Le problème survient lors de la tentative de suppression de l'écouteur d'événement plus tard dans le code.

<code class="javascript">area.removeEventListener('click', function(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}, true);</code>

Cependant, l'écouteur d'événement reste attaché, empêchant sa suppression.

La solution

La raison de ce problème réside dans la manière dont les écouteurs d'événements sont attachés. Chaque instance de fonction différente crée un écouteur d'événement distinct. Dans ce cas, deux fonctions anonymes sont utilisées pour ajouter et supprimer l'écouteur.

Pour résoudre le problème, assurez-vous que la référence de fonction utilisée pour la suppression est identique à celle utilisée pour ajouter l'écouteur.

<code class="javascript">function handleClickListener(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}

// Add event listener
area.addEventListener('click', handleClickListener, true);

// Remove event listener
area.removeEventListener('click', handleClickListener, true);</code>

En utilisant la même référence de fonction pour les deux opérations, JavaScript peut supprimer correctement l'écouteur d'événement lorsqu'il est appelé.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!