Comment utiliser correctement « $(this) » avec les gestionnaires de clics jQuery et les fonctions fléchées ES6 ?

jQuery $(this) et fonctions fléchées ES6

Bien que les fonctions fléchées ES6 offrent cette liaison lexicale, elles peuvent poser un défi lorsqu'elles sont utilisées avec Liaisons de clic jQuery. Lors de l'utilisation de fonctions fléchées dans ce scénario, $(this) se comporte différemment, émulant essentiellement le comportement de fermeture ES5 :

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

Pour résoudre ce problème, il est important de comprendre que Traceur n'a pas la capacité d'ignorer $( this) pour la liaison lexicale dans ce contexte. ES6 dicte le comportement des fonctions fléchées, et elles n'ont intrinsèquement pas accès au lexical this.

La solution réside dans l'utilisation de event.currentTarget au lieu de $(this):

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

jQuery fournit un événement .currentTarget spécifiquement à cet effet, car il reconnaît que l'accès au lexical n'est pas toujours réalisable avec les fonctions de rappel. En tirant parti de event.currentTarget, le bon élément sera ciblé, évitant ainsi d'avoir à modifier cette liaison ou à introduire une dépendance au code ES5.

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!