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 在第一个示例中有效，但在第二个示例中无效。我需要 $.proxy，所以我无法摆脱它。一旦上下文在函数内部发生更改，我就找不到让 this.offsetLeft 工作的方法。

PS：由于我正在开发扩展，我无法再继续使用 self_ref[index]。

Answer 1

要么像 Dennis 所说的那样在外部作用域中保留 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 指的是被单击的元素。在第二个中，您使用它来引用被单击的元素以及将函数代理到的对象。您可以在创建处理程序并创建闭包时通过重命名 this 来修改原始的工作示例：

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

Answer 3

编辑：其他两个答案显然都比这个好得多。尊重:-)

---

，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。