jQuery: Найти левое смещение в то время как внутри $ .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 работает в первом примере, но не во втором. I необходимо$.proxy, поэтому я не могу избавиться от него. Я не могу найти способ получить this.offsetLeft для работы после того, как контекст был изменен внутри его функции.

PS: Я больше не могу вернуться к использованию self_ref[index] из-за расширений, над которыми я работаю.

Answer 1

Либо сохранить копию this во внешней сфере, как говорит Денис, или использовать e.currentTarget, чтобы получить элемент DOM который обрабатывает событие.

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

в первом примере (не проксированный): this == e.currentTarget

Answer 2

Редактировать: обе другие ответы, очевидно, намного лучше, чем эта. Респект :-)

---

В первом работает пример, this является DOMElement, что была нажата: this.progress

Во втором примере, при использовании $.proxy, this относится к окружающей контекст, а не элемент progress.

Таким образом, внутри обработчикапроксифицированной, вы должны использовать:

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

вместо this.offsetLeft.

Answer 3

this в первом примере относится к элементу, который был нажат. Во втором вы используете его как для ссылки на элемент, который был нажат, так и на объект, к которому вы проксируете функцию. Вы можете изменить оригинальный, рабочий пример путем переименования this при создании обработчика и создании закрытия:

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