Hören Sie eine Mausereignis unter Bedingung

Question

Ich möchte nur ein Mausereignis "hören", wenn ein Kontrollkästchen angeklickt wird. Deshalb habe ich den folgenden Code:

HTML

<input type="checkbox" id="magicLens" onchange="magicLens()"> 
<label for="magicLens">Magic Lens</label> 

JS

function magicLens(){ 
    const magicLens_checked = document.getElementById('magicLens').checked; 

    if (magicLens_checked === true){ 
     canvas.addEventListener('mousemove', e => { 
     myAnonymous = arguments.callee; 
     ... 
     // draw something at the current mouse position 
     // and therefore use the 'e' event object 
    }); 
    } 
    else { 
     canvas.removeEventListener('mousemove', myAnonymous); 
    } 
} 

Problem ist, dass die Zeichnung (eine Linse) tritt auch auf, wenn das Kontrollkästchen nicht aktiviert ist (false). Ich bin mir nicht einmal sicher, ob removeEventListener() der richtige Weg ist, um damit umzugehen (obwohl ich die ganze Sache schon ohne es ausprobiert habe und das Ergebnis das gleiche war).

Vielleicht haben Sie eine bessere Idee, das Problem im Titel zu beschreiben. Fühlen Sie sich frei zu bearbeiten!

Answer 1

Es ist einfacher, tatsächlich immer auf das Ereignis zu hören und dort zu überprüfen, ob das Kontrollkästchen aktiviert ist.

const canvas = document.getElementById('canvas'); 

canvas.addEventListener('mousemove', e => { 
    const magicLens_checked = document.getElementById('magicLens').checked; 

    if (!magicLens_checked) { 
     return; 
    } 

    // Do something with e 
    console.log(e); 
}); 

Sie können es in diesem Fiddle aus. (Ich habe den Ereignis-Listener zum Dokumentieren hinzugefügt, um die Erstellung eines willkürlichen Canvas zu vermeiden.)

Answer 2

Das Javascript-Modul erkennt, was Sie an addEventListener und removeEventListener als zwei verschiedene Funktionen übergeben, weshalb der removeEventListener nicht funktioniert . Erstellen Sie eine benannte Funktion außerhalb dieser und übergeben Sie sie an sie.