Question

我正在尝试创建一个全景滑块作为jQuery插件，我有以下代码：

 $.fn.panorama = function(settings) {

    var myPanorama = this;
    ..

    this.mousedown(function(e){

       //do stuff 
       $(this).css... //this all work
    }


    //Call mouseup on document in case user lets go of mouse outside draggable object
$(document).mouseup(function(){
    $(myPanorama).easeDragging(); //works but probably not the way to do it
    this.easeDragging(); //ideal but refers to wrong object
 });

    }

我的问题是如何在this电话中引用$(document).mouseup对象？

因为它认为this是文档本身而不是附加到插件的对象。

现在我只是制作一个变量而且它有效，但必须有更好的方法！

谢谢！

Answer 1

实际上，你实现它的方式是最简单的方法 - 存储对 this 的引用：

var myPanorama = this;

// ...

    myPanorama.easeDragging();

或者，您可以使用jQuery.proxy()设置函数的上下文（感谢@Nick）：

$(document).mouseup($.proxy(function(){
    this.easeDragging(); 
}, this));

另一种方法是使用ECMAScript第5版 .bind（）方法，虽然你需要将它添加到Function原型中，以便在不支持的浏览器中工作：

// From Prototype.js
if (!Function.prototype.bind) { // check if native implementation available
  Function.prototype.bind = function(){ 
    var fn = this, args = Array.prototype.slice.call(arguments),
        object = args.shift(); 
    return function(){ 
      return fn.apply(object, 
        args.concat(Array.prototype.slice.call(arguments))); 
    }; 
  };
}

然后您可以在代码中使用它，如下所示：

$(document).mouseup((function(){
    this.easeDragging(); 
}).bind(this));

Answer 2

你正在做的事情很好（而且完全正确）。

虽然有一个优化提示，因为它已经是一个jQuery对象，所以不需要再次包装它，你可以这样做：

myPanorama.easeDragging();

Answer 3

无法首先绑定到文档（插件内部），然后确定事件是否对您有用（发生在您的元素或元素的子元素上）。

如果您绑定到文档，则应使用命名空间，例如。

$(document).bind('mouseup.panorama', function() {
    ...
}

jQuery插件：在其他函数中获取“this”对象

3 个答案: