Javascript“onmousemove”事件无法使用类

时间:2016-05-15 17:01:39

标签: javascript events undefined mouse onmousemove

我真的不知道如何在标题中对此进行短语,但我正在尝试创建一个包含所有事件函数的类,但我遇到了一些奇怪的问题。

以下是该问题的一些模拟代码。

class Mouse{
    constructor(){
        this.x = 0;
        this.y = 0;
    }
}

class MainClass{
    constructor(){
        this.mouse = new Mouse();
    }

    updateMouse(event){
        this.mouse.x = event.clientX;
        this.mouse.y = event.clientY;
    }
}

var mouse;
var main;

window.onload = function(){
    main = new MainClass();

    document.onmousemove = main.updateMouse;
}

我遇到的主要问题是,当我运行它时会返回错误“无法设置属性'x'未定义”这很奇怪,因为当我逐步执行程序main.mouse.x时,直到document.onmousemove line。

如果我将updateMouse()函数移动到Mouse类中,请改为执行此操作:

mouse = new Mouse();
document.onmousemove = mouse.updateMouse();

然后它可以工作,但是在我尝试编写的ACTUAL程序中,updateMouse()方法需要调用MainClass中的其他方法,所以我不能这样做。

1 个答案:

答案 0 :(得分:1)

你必须使用

window.onload = function(){
    main = new MainClass();

    document.onmousemove = main.updateMouse.bind(main); // bound function
};

试试吧。如果你没有绑定该功能,它将会看到这个'本身(文档对象)。