5

我在 Javascript 的事件处理程序中有以下问题。我有一个具有mousemove如下事件处理程序的对象：

function MyObject(){ }
function MyObject.prototype = {

    currentMousePosition: null,
    onMouseMove: function(ev){
       this.currentMousePosition = this.getCoordinates(ev);
    },
    getCoordinates: function(ev){
        if (ev.pageX || ev.pageY)
            return { x: ev.pageX, y: ev.pageY };

        return { x: ev.clientX + document.body.scrollLeft - document.body.clientLeft, y: ev.clientY + document.body.scrollTop - document.body.clientTop };
    }

};

我试图解决的问题是围绕对象上下文解决的。在我的onMouseMove函数中，它分配了currentMousePosition属性。自然这不会起作用，因为它是一个处理mousemove事件的静态函数。

我正在寻找的是一种通过我的事件处理程序传递对象上下文的技术/方法。我能想到的最好的例子是 Google Maps API 函数GEvent.bind()。有了它，您可以传递要在指定事件上触发的函数的对象。我基本上在寻找同样的东西。

4

2 回答 2

6

今天，许多人使用显式闭包来做到这一点：

var myobject= new MyObject();
element.onmousemove= function() {
    myobject.onMouseMove();
};

但在未来，您将使用 ECMAScript 第五版方法function.bind：

element.onmousemove= myobject.onMouseMove.bind(myobject);

（在调用时，传递给的任何其他参数都会function.bind添加到目标函数的参数列表中。）

在浏览器都原生支持之前function.bind，您可以使用原型和闭包来破解自己的支持。有关示例实现，请参阅此答案的底部。

document.body.scrollLeft

仅document.body当您处于 IE 怪癖模式时。您不想处于怪癖模式。相反，使用标准模式文档类型document.documentElement。因此，如果您需要支持可能使用任何一种模式的不同页面，或者出于某种原因仍需要支持 IE5（希望不是）：

var viewport= document.compatMode==='CSS1Compat'? document.documentElement : document.body;
return {x: ev.clientX+viewport.scrollLeft, y: ev.clientY+viewport.scrollTop};
于 2010-02-11T02:57:53.147 回答
0

您需要传递一个包装函数，该函数在正确的上下文中调用您的处理程序。

例如：

addHandler(function(ev) { someObject.onMouseMove(ev); });
于 2010-02-11T02:59:11.813 回答