我在Javascript中的事件处理程序中遇到以下问题.我有一个像这样有一个mousemove事件处理程序的对象.
function MyObject(){ }
function MyObject.prototype = {
currentMousePosition: null,
onm ouseMove: 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()
有了它,您可以使用要在指定事件上触发的函数传递对象.我基本上都在寻找同样的东西.
解决方法:
今天,许多人通过明确的关闭来做到这一点:
var myobject= new MyObject();
element.onmousemove= function() {
myobject.onMouseMove();
};
但是在将来,你将使用ECMAScript第五版方法function.bind:
element.onmousemove= myobject.onMouseMove.bind(myobject);
(传递给function.bind的任何其他参数在被调用时会被添加到目标函数的参数列表中.)
在浏览器本身都支持function.bind之前,你可以使用原型和闭包攻击自己的支持.有关示例实现,请参见this answer的底部.
document.body.scrollLeft
如果您处于IE Quirks模式,它只是document.body.你不想处于Quirks模式.使用标准模式doctype,它是document.documentElement.因此,如果您需要支持可能使用其中任何一种模式的不同页面,或者您仍需要出于某种原因支持IE5(我们希望不要):
var viewport= document.compatMode==='CSS1Compat'? document.documentElement : document.body;
return {x: ev.clientX+viewport.scrollLeft, y: ev.clientY+viewport.scrollTop};