Wie verwende ich $(this) von jQuery korrekt mit ES6-Pfeilfunktionen in Ereignishandlern?

Verwendung von jQuery $(this) mit ES6-Pfeilfunktionen (lexikalische This-Bindung)

Das Binden von Ereignishandlern mithilfe von ES6-Pfeilfunktionen kann problematisch sein, wenn Arbeiten mit dem $(this)-Selektor von jQuery. Dies liegt daran, dass Pfeilfunktionen das Schlüsselwort this lexikalisch binden, was in jQuery-Rückrufen möglicherweise nicht das gewünschte Verhalten ist.

Das folgende Beispiel veranschaulicht das Problem:

class Game {
  foo() {
    this._pads.on('click', () => {
      if (this.go) { $(this).addClass('active'); }
    });
  }
}

Im obigen Beispiel using Eine Pfeilfunktion für den Click-Event-Handler führt dazu, dass $(this) auf die Game-Instanz statt auf das angeklickte Element verweist. Dies liegt daran, dass Pfeilfunktionen keine eigene Bindung haben und sie daher vom umgebenden Bereich erben.

Lösung

Um dieses Problem zu beheben, vermeiden Sie die Verwendung von Pfeilfunktionen beim Binden von jQuery-Ereignishandlern. Verwenden Sie stattdessen herkömmliche Funktionsdeklarationen oder binden Sie das Schlüsselwort this explizit mit der Bindungsmethode:

class Game {
  foo() {
    this._pads.on('click', function() {
      if (this.go) { $(this).addClass('active'); }
    }.bind(this));
  }
}

Alternativ können Sie mit event.currentTarget auf das angeklickte Element zugreifen:

class Game {
  foo() {
    this._pads.on('click', (event) => {
      if (this.go) { $(event.currentTarget).addClass('active'); }
    });
  }
}

Mit event .currentTarget bietet Zugriff auf das Element, das das Ereignis ausgelöst hat, unabhängig vom Bindungskontext der Rückruffunktion.

Das obige ist der detaillierte Inhalt vonWie verwende ich $(this) von jQuery korrekt mit ES6-Pfeilfunktionen in Ereignishandlern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!