jQuery : Trouver le décalage à gauche tout en étant dans $.proxy

Question

this.progress.click(function(e) { // works
    var seek = (e.pageX - this.offsetLeft) / $(this).width();
    self_ref[index].seek(seek * self_ref[index].source.duration);
});

this.progress.click($.proxy(function(e) { // doesn't work
    var seek = (e.pageX - this.offsetLeft) / $(this).width();
    this.seek(seek * this.source.duration);
}, this));

this.offsetLeft fonctionne dans le premier exemple mais pas dans le second. I besoin de $.proxy donc je ne peux pas m'en débarrasser. Je ne peux pas trouver un moyen d'obtenir this.offsetLeft pour fonctionner une fois que le contexte a été modifié dans sa fonction.

PS : je ne peux plus revenir à l'utilisation de self_ref[index] à cause d'une extension sur laquelle je travaille.

Answer 1

Soit vous gardez une copie de this dans la portée externe comme le dit Dennis, ou utiliser e.currentTarget pour obtenir l'élément du DOM qui gère l'événement.

this.progress.click($.proxy(function(e) { // doesn't work
    var seek = (e.pageX - e.currentTarget.offsetLeft) / $(e.currentTarget).width();
    this.seek(seek * this.source.duration);
}, this));

dans votre premier exemple (non proxié) : this == e.currentTarget

Answer 2

this dans le premier exemple fait référence à l'élément qui a été cliqué. Dans le deuxième exemple, vous l'utilisez à la fois pour faire référence à l'élément qui a été cliqué et à l'objet vers lequel vous envoyez la fonction par procuration. Vous pouvez modifier l'exemple original en renommant les éléments suivants this lorsque vous créez le gestionnaire et que vous créez une fermeture :

var self = this;
this.progress.click(function(e) {
    var seek = (e.pageX - this.offsetLeft) / $(this).width();
    self.seek(seek * self.source.duration);
});

Answer 3

Edit : les deux autres réponses sont évidemment bien meilleures que celle-ci. Respect :-)

---

Dans le premier travail exemple, this est le DOMElement qui a été cliqué : this.progress

Dans le deuxième exemple, lorsque l'on utilise $.proxy , this fait référence à la entourant et non le progress plus d'élément.

Ainsi, au sein de la proxifié manipulateur que vous devriez utiliser :

 this.progress.get(0).offsetLeft 
 // .get(0) is to obtain the DOMElement
 // and get access to the javascript property offsetLeft 

au lieu de this.offsetLeft .