javascript - 如何删除 Angular 4 中的事件监听器

Question

我需要在触发后立即移除轮子事件监听器。我尝试了以下但它没有删除事件监听器。

export class HomeComponent implements OnInit {

    constructor() {}

    ngOnInit() {
       document.querySelector("#section-one").addEventListener("wheel", () => this.myFunction1(), true);
    }

    myFunction1() {
      alert();
      document.querySelector("#section-one").removeEventListener("wheel", this.myFunction1, true);
      console.log("Done!");
    }
}

有什么建议吗？

Answer 1

根据 the docs :

Calling removeEventListener() with arguments that do not identify anycurrently registered EventListener on the EventTarget has no effect.

您的代码不应该工作。

可能的修复方法如下:

wheelHandler: any;

ngOnInit() {
    this.wheelHandler = this.myFunction1.bind(this);
    document.querySelector("#section-one").addEventListener("wheel", this.wheelHandler, true);
}

myFunction1() {
    alert();
    document.querySelector("#section-one").removeEventListener("wheel", this.wheelHandler, true);
    console.log("Done!");
}

其中 wheelHandler 是引用同一处理程序实例的函数

有关更多 Angular 解决方案，请参见

• > How to listen for mousemove event on Document object in Angular

但是 AFAIK useCapture 参数还不被支持。所以它总是false