[JS] removeEventListener löscht nicht

[nietaL]

Hallo Leute,

ich komme nicht mehr weiter, obwohl ich viel nachgelesen habe. Es geht darum, dass ein Kreis um den Cursor entstehen soll - aber nur solange der Mauspfeil auf einem bestimmten Bereich ist, dann soll die Verfolgung durch den Kreis aufhören.

Ich möchte ein durch onMouseOver hinzugefügten eventListener mit onMouseOut also wieder entfernen. Ersters klappt wunderbar, letzteres leider nicht. Ich habe auch die Debugging-Konsole von Chrome verwendet und gesehen, dass das Event stur erhalten bleibt. Ausgaben in der Console verraten mir, dass der Interpreter zumindest über den remove-Befehl rübergerollt ist. Könnt ihr mir erklären, warum er nicht aufhören möchte? Würde mich über Tipps sehr freuen.

Cursor-Element
<div class="cursor" id="cursor"></div>

Javascript Funktionen
function changeCursor(direction) { var cursor = document.getElementById("cursor"); var handler = function (e) { cursor.style.left = e.clientX + "px", cursor.style.top = e.clientY + "px"; console.log(cursor.style.top); } if(direction == "over") { window.document.addEventListener("mousemove", handler); window.document.removeEventListener("mousemove", handler, true); console.log("over"); } else if (direction == "out") { window.document.removeEventListener("mousemove", handler, true); console.log("out"); } }

Auslösender HTML-Teil
echo "<canvas id=\"bildkoord\" height=\"500\" width=\"500\" onMouseOver=\"changeCursor('over');\" onMouseOut=\"changeCursor('out');\" onClick=\"koordinaten(this, event); storeCoords();\" style=\"border:1px solid grey; background-image:url(img/sieger.jpg); background-size:contain; background-repeat:no-repeat; display: block; \"></canvas>";

 

[dexter]

Was spricht denn gegen

cursor:url(/images/kreis.png), auto;

?

 

[theSplit]

Hi @nietaL !

Schreib bitte keine Events "inline" und den "onEvent" Attributes, das macht man schon lange nicht mehr. Eleganter geht das direkt über Javascript!

Ich glaube der Teil der bei dir nicht stimmt ist der folgende:

    if(direction == "over")
    {
        // Hier setzt du den Handler (add)... aber auf "window.document" (nicht das Canvas!!)
        window.document.addEventListener("mousemove", handler);
       
        // Und hier entfernst du ihn gleich wieder... (remove), sicherlich falsch kopiert
        window.document.removeEventListener("mousemove", handler, true);
        console.log("over");
    }
    else if (direction == "out")
    {
        // Auch hier wieder das window.document, anstelle des Canvas
        window.document.removeEventListener("mousemove", handler, true);
        console.log("out");
    }
}

Du verwendest für die Event Steuerung als Ziel das "window.document" - vermutlich willst du es aber nur auf das Canvas Element anwenden, welches auch die Inline Events beherbergt und abgehorcht werden soll.

Das machst du dann wie folgt:

// Das Element (Canvas) #bildkoord im DOM finden damit wir die Events hinzufügen und löschen können..
// Im Hauptteil der Funktion
var canvasElement = document.querySelector('#bildkoord');

// Hier die korrekten Event Listener Handler:

// MouseMove hinzufügen ("over" Routine)
canvasElement.addEventListener("mousemove", handler);

// MouseMove entfernen ("out" Routine)
canvasElement.removeEventListener("mousemove", handler);

 

[nietaL]

Also erst einmal vielen Dank an euch zwei.

Was spricht denn gegen ... ?

Eine wirklich simple und gute Idee. Aber ich möchte auch noch die Farben , Formen und Größen des neuen Cursors dynamisch änderung können. Daher dachte ich, dass es über JS besser geht.

Schreib bitte keine Events "inline" und den "onEvent" Attributes, das macht man schon lange nicht mehr.

Also den Satz verstehe ich grammatikalisch nicht. Ist da ein Tippfehler? Ansonsten konnte ich aber verstehe, dass ich das Canvas-Element direkt ansprechen soll. Aber dieses jQuery macht mich noch immer nervös, sodass ich es nie benutze 🙃 Aber es klappt jetzt, vielen Dank für diesen Hinweis.

// Und hier entfernst du ihn gleich wieder... (remove), sicherlich falsch kopiert

Ich bin froh, dass du mir die Dummheit nicht zugetraut hast.

 

[theSplit]

Also den Satz verstehe ich grammatikalisch nicht. Ist da ein Tippfehler? Ansonsten konnte ich aber verstehe, dass ich das Canvas-Element direkt ansprechen soll. Aber dieses jQuery macht mich noch immer nervös, sodass ich es nie benutze 🙃

Ich bin auch kein Fan von jQuery und nutze die Lib bewusst nicht.. aber das bin nur ich.

Was ich mit dem Satz meine, schreibe keine "onclick", "onmouseover" oder das "onmouseout" Inline in das HTML Element. Du kannst das am Ende der JS Datei besser selbst machen. Zum testen mag das gehen, aber es bläht das HTML unnötig auf und außerdem ist das leicht fehleranfällig. In einem Skript hast du das alles viel logischer zusammen.

 

[nietaL]

Dass das ganze aufblähend ist, empfinde ich auch so. Aber wie rufe ich denn eine JS-Funktion sonst auf, wenn sie nur auf MouseOver und MouseOut über ein Element reagieren soll?

 

[theSplit]

Eigentlich machst du genau das, was du jetzt im Skript machst, aber außerhalb der Funktion:

function mouseMoveHandler(evt) {
    console.log(evt.type);
    console.log(evt.clientX, evt.clientY);
}

function changeCursor(evt) {
    console.log(evt.type);
    if (evt.type === 'mouseover') {
        console.log('over')
        evt.target.addEventListener('mousemove'), mouseMoveHandler);
    } else if (evt.type === 'mouseout') {
        console.log('out')
        evt.target.removeEventListener('mousemove'), mouseMoveHandler);
    }
}

// Hier ist der normale Bereich in der JS-Datei:
var canvasElement = document.querySelector('#bildkoord');
canvasElement.addEventListener("mouseover, changeCursor);
canvasElement.addEventListener("mouseout, changeCursor);

 

[nietaL]

Oh, Gott.
Ja, alles klar. Danke für den Hinweis!