Entfernen eines JavaScript-Ereignisses: Warum funktioniert dieses Beispiel nicht?

Question

ich mit dem Entfernen einer JavaScript-Event habe Schwierigkeiten, die zu einem DOM-Element wit element.addEventListener vorher hinzugefügt wurde:

$(() => { 
    var example = { 
    init() { 
     this.element = document.getElementById('foo'); 
     this.element.addEventListener('mousedown', this.start.bind(this)); 
    }, 
    start() { 
     console.log('start'); 
     this.element.addEventListener('mouseup', this.stop.bind(this)); 
    }, 
    stop() { 
     console.log('stop'); 
     this.element.removeEventListener('mouseup', this.stop); 
    } 
    }; 

    var bar = Object.create(example); 
    bar.init(); 
}); 

Fiddle

Wenn das Element klicken und die Maustaste halten, 'Start' angemeldet ist. Sobald die Maustaste losgelassen wird, wird "Stop" protokolliert. Das erste Mal funktioniert dies wie vorgesehen, aber das zweite Mal "Stop" wird zweimal protokolliert, dann dreimal, dann vier Mal ... Das bedeutet, dass in stop() das Ereignis nicht ordnungsgemäß entfernt wird.

Ich weiß, dass ich genau die gleiche Instanz an übergeben muss Ich ging zu addEventListener, aber mir scheint das in diesem Fall richtig, also bin ich ein wenig verloren, warum das nicht richtig funktioniert.

Answer 1

Es funktioniert nicht, weil bind eine neue Funktion zurückgibt, die sich von Ihrer ursprünglichen unterscheidet. Sie fügen einen als Handler hinzu, versuchen jedoch, einen anderen zu entfernen.

Sie müssen den Rückgabewert von bind von irgendwo speichern und es zum Hinzufügen und Entfernen des Ereignishandlers verwenden.