Вот мой класс.
class Foo {
constructor(theDiv) {
this.myDiv = theDiv;
console.log("new foo");
this.doFoo();
}
doFoo() {
this.myDiv.onmousedown = this.doMouseDownFoo;
console.log("doFoo:");
console.log("this: " + this);
console.log("this.dragFoo: " + this.dragFoo);
}
doMouseDownFoo(e) {
console.log("DoMouseDownFoo:");
console.log("this: " + this);
console.log("this.dragFoo: " + this.dragFoo);
document.onmousemove = Foo.dragFoo;
}
dragFoo(e){
console.log("dragFoo");
}
}
Я вызываю его с помощью
let f = new Foo(document.getElementById("handle"));
и ожидаю, что когда я нажимаю на handle
div, он регистрирует много 'dragFoo' ' Сообщения.
Но журнал выглядит так:
new foo
doFoo:
this:
this.dragFoo: dragFoo(e){
console.log("dragFoo");
}
//----I click on div-------
DoMouseDownFoo:
this: [object HTMLDivElement]
this.dragFoo: undefined
Итак, когда я вызываю DoMouseDownFoo
, назначая его на onmousedown
и щелкая, внезапно this
теперь становится div, а не класс и методы класса выходят за рамки.
Как сделать dragFoo
обработчиком перетаскивания?