Как я могу назначить методы класса JS для onmousedrag - PullRequest
0 голосов
/ 28 мая 2020

Вот мой класс.

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 обработчиком перетаскивания?

...