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);
    }
}

我使用 .bind（this）然后指针就可以了，但是当我调用stopResize（）方法时，removeEventListener不起作用。方法onResize（）仍然有效。

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

Answer 1

您必须指定lazy val root = (project in file(".")) .settings(commonSettings: _*) .settings(routesGenerator := InjectedRoutesGenerator) .settings( libraryDependencies += "com.typesafe.slick" %% "slick" % "3.1.1", libraryDependencies += "com.typesafe.slick" %% "slick-codegen" % "3.1.1", libraryDependencies += "com.github.tminglei" %% "slick-pg" % "0.14.1", libraryDependencies += "com.github.tminglei" %% "slick-pg_date2" % "0.14.1", libraryDependencies += "com.typesafe.play" %% "play-slick" % "2.0.2", libraryDependencies += "jp.t2v" %% "play2-auth" % "0.14.2", libraryDependencies += play.sbt.Play.autoImport.cache, libraryDependencies += "com.github.t3hnar" %% "scala-bcrypt" % "2.6", libraryDependencies += "org.webjars" %% "webjars-play" % "2.5.0", libraryDependencies += "org.webjars" % "foundation" % "6.2.3" ).enablePlugins(PlayScala) resolvers += "Sonatype Snapshots" at "https://oss.sonatype.org/content/repositories/snapshots/"提供给removeEventListener的相同功能。 addEventListener返回的函数与原始函数不同（如果是，则会出现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);
}

Answer 2

这是通过使用胖arrow function来减少样板的一种优雅方式：

export class AppComponent {
  private classMember = 'aClassMember';

  // use the fat arrow to bind the event
  private eventListener = () => {
    console.log(this.classMember);
  };

  registerEvent() {
    this.htmlEl.addEventListener('click', this.eventListener);
  );

  unregisterEvent() {
    this.htmlEl.removeEventListener('click', this.eventListener);
  );
}

提示：

使用passive event handler，除非您要调用preventDefaults
要避免事件触发Angular变化检测，请使用runOutsideAngular()
full stackblitz example

Answer 3

在Angular中。在这种情况下，版本10

  listenerCustomerContainerApp: any;

  ngOnInit(): void {
    if(!this.listenerCustomerContainerApp){
      this.listenerCustomerContainerApp = this.ceListenerCustomerContainerApp.bind(this);
    }
    window.addEventListener('ce_customer_app_link', this.listenerCustomerContainerApp , true);
  }

然后

  ceListenerCustomerContainerApp(event: any) {
    this.router.navigate([event.detail.path]);
  }

最后

ngOnDestroy() {
    if (this.listenerCustomerContainerApp) {
      window.removeEventListener('ce_customer_app_link', this.listenerCustomerContainerApp, true);
    }
  }

Angular 2 document.removeEventListener在类

3 个答案: