Warum funktioniert mein JavaScript-RemoveEventListener nicht?

Javascript „removeEventListener“ funktioniert nicht

Beim Versuch, Ereignis-Listener zu einem Element in Javascript hinzuzufügen und zu entfernen, funktioniert die Funktion „removeEventListener“ möglicherweise nicht wie erwartet . Dieses Problem tritt auf, wenn die anonyme Funktion, die als zweites Argument für „removeEventListener“ bereitgestellt wird, nicht dieselbe Funktionsreferenz ist, die ursprünglich dem „addEventListener“ zugewiesen wurde.

Verstehen des Problems

In Mit dem bereitgestellten Code werden die Ereignis-Listener mithilfe anonymer Funktionen angehängt und entfernt:

area.addEventListener('click', function(event) { ... }, true);
area.removeEventListener('click', function(event) { ... }, true);

Diese anonymen Funktionen sind jedoch völlig unterschiedliche Objekte. Auch wenn sie möglicherweise dieselben Aufgaben ausführen, handelt es sich nicht um dieselbe Referenz.

Lösung

Um einen Ereignis-Listener ordnungsgemäß zu entfernen, müssen Sie dieselbe Funktionsreferenz bereitstellen wurde verwendet, um den Listener hinzuzufügen. Definieren Sie eine benannte Funktion außerhalb der Aufrufe „addEventListener“ und „removeEventListener“:

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

Auf diese Weise erkennt die Funktion „removeEventListener“ die ursprünglich angehängte Funktionsreferenz und trennt den Ereignis-Listener erfolgreich.

Das obige ist der detaillierte Inhalt vonWarum funktioniert mein JavaScript-RemoveEventListener nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!