Comment utiliser correctement $(this) de jQuery avec les fonctions fléchées ES6 dans les gestionnaires d'événements ?

Utilisation de jQuery $(this) avec les fonctions fléchées ES6 (lexical cette liaison)

La liaison des gestionnaires d'événements utilisant les fonctions fléchées ES6 peut être problématique lorsque travailler avec le sélecteur $(this) de jQuery. En effet, les fonctions fléchées lient lexicalement le mot-clé this, ce qui peut ne pas être le comportement souhaité dans les rappels jQuery.

L'exemple suivant illustre le problème :

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

Dans l'exemple ci-dessus, en utilisant une fonction de flèche pour le gestionnaire d'événements click entraîne $(this) référençant l'instance de jeu au lieu de l'élément cliqué. En effet, les fonctions fléchées n'ont pas leur propre liaison, elles en héritent donc de la portée environnante.

Solution

Pour résoudre ce problème, évitez d'utiliser les fonctions fléchées lors de la liaison des gestionnaires d'événements jQuery. Utilisez plutôt des déclarations de fonction traditionnelles ou liez explicitement le mot-clé this à l'aide de la méthode bind :

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

Vous pouvez également accéder à l'élément cliqué à l'aide de event.currentTarget :

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

Utilisation de l'événement .currentTarget donne accès à l'élément qui a déclenché l'événement, quel que soit le contexte de liaison de la fonction de rappel.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!