Question

0

266

Views

How do I remove a 'pointermove' event listner with 'pointerup' event in a JavaScript class?

I'm trying to do the following:

User left clicks and holds down the click, as a user moves their mouse (while holding down left click) the pointer move event will console.log "Pointer Move"
On release of the left click (aka on pointerup event) I want to remove the pointer move event, therefore when a user moves their mouse it will no longer console.log "Pointer move"

I have something now in which my 'pointermove' event is always firing even after I trigger the pointer up event and remove it. You can see it in the log here - after pointer up I don't want it to fire pointer move anymore:

Here's the code:

class Controls{
    constructor() {

        this.setControls();
        this.onPointerDown();
    }

    setControls() {
        window.addEventListener("pointerdown", this.onPointerDown);
    }

    onPointerDown(event) {
        window.addEventListener("pointermove", this.onPointerMove);
        window.addEventListener("pointerup", this.onPointerUp);
        console.log("Pointer Down");
    }

    onPointerMove(event) {
        console.log("Pointer Move");
    }

    onPointerUp(event) {
        console.log("Pointer Up");
        window.removeEventListener("pointermove", this.onPointerMove);
        window.removeEventListener("pointerup", this.onPointerUp);
    }
}

let controls = new Controls();

<div>Test</div>

about 4 years ago · Juan Pablo Isaza

Answer question

0

266

How do I remove a 'pointermove' event listner with 'pointerup' event in a JavaScript class?

Find remote jobs

Andres GPT