JavaScript removeEventListener funktioniert nicht

Habe ich den folgenden code hinzu, um eventListener

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

Ist es korrekt funktioniert wie erwartet..Später in einer anderen Funktion habe ich versucht zu entfernen, wird der Ereignis-listener mit dem folgenden code

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

Aber auch die listener nicht entfernt..Warum ist es passiert?Gibt es irgendein problem mit meinem removeEventListener()?
Hinweis:Hier Bereich ist so etwas wie document.getElementById('myId')

InformationsquelleAutor der Frage Jinu Joseph Daniel | 2012-05-04

Liegt das daran, dass zwei anonyme Funktionen sind ganz verschiedene Funktionen. Ihre removeEventListener's argument ist nicht ein Verweis auf die Funktion Objekt wurde zuvor angebracht.

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

InformationsquelleAutor der Antwort duri

2

Erstellen Sie zwei verschiedene Funktionen, beide Anrufe. Also die zweite Funktion bezieht sich nicht in irgendeiner Weise auf die erste und die engine ist in der Lage zu entfernen-Funktion. Die Verwendung einer gemeinsamen Kennung für die Funktion statt.
```
var handler = function(event) {
              app.addSpot(event.clientX,event.clientY);
              app.addFlag = 1;
          };
area.addEventListener('click', handler,true);
```
später können Sie dann entfernen Sie die handler durch den Aufruf
```
area.removeEventListener('click', handler,true);
```
InformationsquelleAutor der Antwort Sirko
0

definieren Sie Ihre Event-Handler zuerst,

dann
```
area.addEventListener('click',handler);
area.removeEventListener('click',handler);
```
InformationsquelleAutor der Antwort neohope

Um es zu entfernen, speichern Sie die Funktion in einer Variablen oder einfach nur verwenden Sie eine benannte Funktion und übergeben dieser Funktion, um die removeEventListener nennen:

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

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

InformationsquelleAutor der Antwort ThiefMaster

0

Wenn Sie möchten, übergeben, lokale Variablen der Funktion, die aufgerufen wird, indem der Ereignis-listener können Sie die Definition der Funktion innerhalb der Funktion (lokale Variablen), und übergeben Sie den Namen der Funktion in der Funktion selbst. Zum Beispiel, starten wir innerhalb der Funktion fügt hinzu, dass die Ereignis-listener mit app als eine lokale variable. Schreiben Sie eine Funktion innerhalb dieser Funktion, wie
```
function yourFunction () {
    var app;

    function waitListen () {
        waitExecute(app, waitListen);
    }

    area.addEventListener('click', waitListen, true);
}
```
Dann haben Sie das, was Sie brauchen, um es zu entfernen, wenn waitExecute genannt wird.
```
function waitExecute (app, waitListen) {
    ... //other code
    area.removeEventListener('click', waitListen, true);
}
```
InformationsquelleAutor der Antwort VectorVortec

Ich habe ein problem mit removeEventListener (), die Bedürfnisse zu erklären.

Ich wollte in der Lage sein, um Parameter an Ereignis-Listener, also schrieb ich eine Funktion zum generieren der Ereignis-listener, die wiederum gibt eine zweite Funktion, die Anrufe, die meine beabsichtigte Ereignis-listener als callback.

Die komplette Bibliothek-Datei ist wie folgt:

//Event handler constants

function EventHandlerConstants()
{
this.SUCCESS = 0;   //Signals success of an event handler function
this.NOTFUNCTION = 1;   //actualHandler argument passed to MakeEventHandler() is not a Function object

//End constructor
}

//MakeEventHandler()

//Arguments:

//actualHandler : reference to the actual function to be called as the true event handler

//selfObject    : reference to whatever object is intended to be referenced via the "this" keyword within
//         the true event handler. Set to NULL if no such object is needed by your true
//         event handler specified in the actualHandler argument above.

//args      : array containing the arguments to be passed to the true event handler, so that the true
//         event handler can be written with named arguments, such as:

//         myEventHandler(event, arg1, arg2, ... )

//         If your function doesn't need any arguments, pass an empty array, namely [], as the
//         value of this argument.

//Usage:

//c = new EventHandlerConstants();
//res = MakeEventHandler(actualHandler, selfObject, args);
//if (res == c.SUCCESS)
// element.addEventListener(eventType, res.actualHandler, true);   //or whatever


function MakeEventHandler(actualHandler, selfObject, args)
{
var c = new EventHandlerConstants();

var funcReturn = null;      //This will contain a reference to the actual function generated and passed back to
                //the caller

var res = {
        "status" : c.SUCCESS,
        "actualHandler" : null
        };

if (IsGenuineObject(actualHandler, Function))
{
    res.actualHandler = function(event) {

        var trueArgs = [event].concat(args);

        actualHandler.apply(selfObject, trueArgs);

    };

}
else
{
    res.status = c.NOTFUNCTION;

//End if/else
}

//Return our result object with appropriate properties set ...

return(res);

//End function
}

Dann schrieb ich einen quick-test-Seite herausfinden, ob das funktionierte wie gedacht, und mir erlaubt das hinzufügen UND entfernen von Ereignis-Handlern.

Den HTML-test-Seite ist wie folgt:

<!DOCTYPE html>
<html>
<head>

<!-- CSS goes here -->

<link rel="stylesheet" type="text/css" href="NewEventTest.css">

<!-- Required JavaScript library files -->

<script language = "JavaScript" src="BasicSupport.js"></script>
<script language = "JavaScript" src="EventHandler6.js"></script>

</head>

<body class="StdC" id="MainApplication">

<button type="button" class="StdC NoSwipe" id="Button1">Try Me Out</button>

<button type="button" class="StdC NoSwipe" id="Button2">Alter The 1st Button</button>

</body>

<script language = "JavaScript" src="NewEventTest.js"></script>

</html>

Vollständigkeit halber, ich benutze das folgende einfache CSS-Datei aus:

/* NewEventTest.css */


/* Define standard display settings classes for a range of HTML elements */

.StdC {

color: rgba(255, 255, 255, 1);
background-color: rgba(0, 128, 0, 1);
font-family: "Book Antiqua", "Times New Roman", "Times", serif;
font-size: 100%;
font-weight: normal;
text-align: center;

}


.NoSwipe {

user-select: none;  /* Stops text from being selectable! */

}

Den test-code ist wie folgt:

//NewEventTest.js


function GlobalVariables()
{
this.TmpRef1 = null;
this.TmpRef2 = null;
this.TmpRef3 = null;

this.Const1 = null;

this.Handler1 = null;
this.Handler2 = null;
this.Handler3 = null;

this.EventOptions = {"passive" : true, "capture" : true };

//End constructor
}


//Button 1 Initial function

function Button1Initial(event)
{
console.log("Button 1 initial event handler triggered");

//End event handler
}


function Button1Final(event)
{
console.log("Button 1 final event handler triggered");

//End event handler
}


function Button2Handler(event, oldFunc, newFunc)
{
var funcRef = null;

this.removeEventListener("click", oldFunc);
this.addEventListener("click", newFunc, GLOBALS.EventOptions);

//End event handler
}


//Application Setup

GLOBALS = new GlobalVariables();

GLOBALS.Const1 = new EventHandlerConstants();

GLOBALS.TmpRef1 = document.getElementById("Button1");
GLOBALS.TmpRef2 = MakeEventHandler(Button1Initial, null, []);
if (GLOBALS.TmpRef2.status == GLOBALS.Const1.SUCCESS)
{
    GLOBALS.Handler1 = GLOBALS.TmpRef2.actualHandler;
    GLOBALS.TmpRef1.addEventListener("click", GLOBALS.Handler1, GLOBALS.EventOptions);

//End if
}

GLOBALS.TmpRef1 = MakeEventHandler(Button1Final, null, []);
if (GLOBALS.TmpRef1.status == GLOBALS.Const1.SUCCESS)
{
    GLOBALS.Handler3 = GLOBALS.TmpRef1.actualHandler;

//End if
}


GLOBALS.TmpRef1 = document.getElementById("Button2");
GLOBALS.TmpRef2 = document.getElementById("Button1");
GLOBALS.TmpRef3 = Button1Final;
GLOBALS.TmpRef4 = MakeEventHandler(Button2Handler, GLOBALS.TmpRef2, [GLOBALS.Handler1, GLOBALS.Handler3]);
if (GLOBALS.TmpRef4.status == GLOBALS.Const1.SUCCESS)
{
    GLOBALS.Handler2 = GLOBALS.TmpRef4.actualHandler;
    GLOBALS.TmpRef1.addEventListener("click", GLOBALS.Handler2, GLOBALS.EventOptions);

//End if
}

So, die Prüfung ist wie folgt:

[1] Befestigen Sie einen click-Ereignishandler für die Schaltfläche #1;

[2] Test, um zu sehen, ob der event-handler wird aufgerufen, wenn ich auf den button klicken;

[3] Sobald dieser test bestanden ist, klicken Sie auf die Taste 2, und ruft den event-handler daran angebracht, das entfernt die alten event-handler angehängt Taste 1, dann ersetzt es mit einem neuen event-handler.

Schritte [1] und [2] funktionieren. Der event-handler verbunden ist, und aufgerufen, wenn ich klicken Sie auf die Schaltfläche.

Das problem ist, mit Schritt [3].

Obwohl ich speichern Sie einen Verweis auf die Funktion generiert MakeEventHandler(), die speziell für den Zweck des Entfernens Sie, dass Ereignis-listener im Schritt [3], hat der Aufruf der Methode removeEventListener() entfernt NICHT die Ereignis-listener. Durch klicken auf den Button #1 feuert BEIDE Ereignis-Listener, einschließlich die, die ich angeblich entfernt!

Unnötig zu sagen, dieses Verhalten finde ich rätselhaft, trotz sorgfältiger Einstellung alles so einrichten, dass die Funktion, die ich geben in der Aufforderung zur removeEventListener() ist das selbst gleiche Funktion Hinzugefügt habe ich zunächst mit addEventListener() - nach alle die Dokumentation zu dem Thema, die ich gelesen habe (inklusive diesem thread), und übergeben Sie einen Verweis auf die gleiche Funktion bei jedem Aufruf sollte Arbeit, aber offensichtlich nicht an.

Bei Schritt [1], test-Ausgabe in der Konsole liest, wie erwartet:

Taste 1 erste event-handler ausgelöst

Ist der code auch ausgeführt werden, wie erwartet, in Schritt [2], und eine Schritt für Schritt-Ablaufverfolgung der code zeigt, dass in der Tat, wird der code wie erwartet ausgeführt.

Aber in Schritt [3], während die ersten klicken Sie auf die Taste 1 liefert das gewünschte Ergebnis:

Taste 1-final event-handler ausgelöst

was passiert, wenn die Taste 1 geklickt wird auf anschließend ist diese:

Taste 1 erste event-handler ausgelöst
Taste 1-final event-handler ausgelöst

Sicher, auch wenn die Funktion zunächst angebracht, um die Taste 1, dennoch bleibt in Erinnerung, denn es generiert wurde innerhalb von einer Schließung, sollte es immer noch losgelöst von der event-listener-Sammlung für das element? Warum ist es noch angeschlossen ist?

Haben oder ich traf einige seltsame bug mit der Verwendung Verschlüsse mit event-Listenern zu vermelden?

InformationsquelleAutor der Antwort David Edwards

0

Finde ich, dass für das windows-Objekt, wird der Letzte Parameter "true" ist erforderlich.
Das entfernen funktioniert nicht, wenn es keine capture-flag.

InformationsquelleAutor der Antwort Slavik

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.