角2 document.removeEventListenerがクラスで動作しません

Question

アクションが終了したときにイベントを削除できません。私は、クリックすることで、イベントを初期化：

<span class="leftTopPoint" (click)="initResize($event)"></span> 

export class SectionComponent { 
    ... 

    initResize(e): void { 
     this.mouseX = e.clientX; 
     this.mouseY = e.clientY; 

     document.addEventListener('mousemove', this.onResize.bind(this), false); 
     document.addEventListener('mouseup', this.stopResize.bind(this), false); 
    } 
} 

私はこのは大丈夫ですが、私はstopResize（のメソッドの呼び出し時に）、にremoveEventListenerが動作しないポインタを.bind（この）を使用して、。メソッドonResize（）は動作します。

export class SectionComponent { ... 
    stopResize(e): void { 
     document.removeEventListener('mousemove', this.onResize, false); 
     document.removeEventListener('mouseup', this.stopResize, false); 
    } 
} 

Answer 1

あなたがaddEventListenerに提供するようremoveEventListenerに同じ機能を指定する必要があります。 bindによって返される関数は、元の関数と同じではありません（もしそうであれば、thisの問題があります）。

バインドされた関数を保存し、removeEventListenerを呼び出すときに使用する必要があります。

initResize(e): void { 
    this.mouseX = e.clientX; 
    this.mouseY = e.clientY; 

    if (!this.onResizeBound) { 
     this.onResizeBound = this.onResize.bind(this); 
    } 
    if (!this.stopResizeBound) { 
     this.stopResizeBound = this.stopResize.bind(this); 
    } 

    document.addEventListener('mousemove', this.onResizeBound, false); 
    document.addEventListener('mouseup', this.stopResizeBound, false); 
} 

と

stopResize(e): void { 
    document.removeEventListener('mousemove', this.onResizeBound, false); 
    document.removeEventListener('mouseup', this.stopResizeBound, false); 
}