使用jQuery代理时保留两个`this`引用

Question

我正在编写一个jQuery插件,$.proxy在将事件附加到函数时,我会使用它来保持上下文.像这样的东西:

function myPlugin(element) {
    this.element = $(element);
}

$.extend(myPlugin.prototype, {
    init: function() {
        this.btns = this.element.find('.control-btns');
        this.register_events();
    },

    register_events: function() {
        this.btns
            .off('click.myplugin')
            .on('click.myplugin', $.proxy(this.foo, this));                   
    },

    foo: function(e) {
        this.bar();
        var btnClicked = $(e.target);
    },

    bar: function() {
        // some code here
    }
});

正如您所看到的,在运行时foo我需要有正确的上下文this才能调用该bar函数(这只是为了示例,我做的不仅仅是调用一个特定的函数).

但是,我还需要另一个 this - 表示单击按钮的那个.我认为e.target已经足够了,但事实证明它捕获了被点击的东西,而不是带有事件监听器的元素 - 即如果我的按钮有一些内部区域(比如一个跨度),点击它会传播,但随后e.target会指向对<span>代替<button>.我做了一个小型演示,展示了这个问题.

我怎样才能传递正确的this背景,而不会丢失我本来会得到的那个？

Answer 1

而不是target你需要currentTarget.currentTarget是您附加事件处理程序的元素.

见演示