Impossible de supprimer EventListener dans Typescript

Question

J'essaie de supprimer les écouteurs d'événements en dactylographié. J'ajoute un écouteur d'événement dans l'instruction if. Dans l'instruction else, j'essaie de supprimer ces écouteurs d'événements, mais pour une raison quelconque, cela ne les supprime pas.

Pour information : j'ai un bouton sur lequel je définis une valeur booléenne (movePick). Si cela est vrai, je veux pouvoir déplacer mon objet. C'est ici que l'écouteur d'événements est créé. Si je clique à nouveau sur le bouton, je ne peux plus déplacer l'objet. C'est pourquoi j'ai essayé de supprimer l'écouteur d'événement.

public moveObject(movePick: boolean, raycaster: THREE.Raycaster): void {
        const plane = new THREE.Plane();
        const pNormal = new THREE.Vector3(0, 1, 0); // plane's normal
        const planeIntersect = new THREE.Vector3(); // point of intersection with the plane
        const pIntersect = new THREE.Vector3(); // point of intersection with an object (plane's point)
        const shift = new THREE.Vector3(); // distance between position of an object and points of intersection with the object
        let isDragging = false;
        let dragObject: any;
        // events

        const pointermove = (event: PointerEvent) => {
            const rect = this.canvas.getBoundingClientRect();
            const x = event.clientX - rect.left
            const y = event.clientY - rect.top
            const pickPosition = { x: 0, y: 0 };
            pickPosition.x = (x / this.canvas.clientWidth) * 2 - 1;
            pickPosition.y = (y / this.canvas.clientHeight) * -2 + 1;
            raycaster.setFromCamera(pickPosition, this.camera);
            // console.log("movePICK IN POINTERMOVE",movePick)
            if (isDragging) {
                raycaster.ray.intersectPlane(plane, planeIntersect);
                dragObject.position.addVectors(planeIntersect, shift);
            }
        }

        const mousedown = () => {
            const intersects = raycaster.intersectObjects(this.scene.children);

            for (let i = 0; i < this.mesharr.length; i++) {
                if (intersects[0].object.name == this.mesharr[i].name && intersects[0].object.name != "Rail") {
                    pIntersect.copy(intersects[0].point);
                    plane.setFromNormalAndCoplanarPoint(pNormal, pIntersect);
                    shift.subVectors(intersects[0].object.position, intersects[0].point);
                    isDragging = true;
                    dragObject = intersects[0].object;
                }
            }
        }

        const pointerup = () => {
            isDragging = false;
            dragObject = null;
        }
        **if (movePick) {
            document.addEventListener("pointermove", pointermove);
            document.addEventListener("mousedown", mousedown);
            document.addEventListener("pointerup", pointerup);
        } else {
            document.removeEventListener("pointermove", pointermove);
            document.removeEventListener("mousedown", mousedown);
            document.removeEventListener("pointerup", pointerup);
        }**
    }

Si je supprime la liste d'événements dans la même instruction if dans laquelle j'ai ajouté la liste d'événements, elles sont supprimées. Mais si je clique à nouveau sur le bouton et que j'entre l'instruction else, je ne peux pas les supprimer. J'ai également essayé plusieurs solutions dans stackoverflow mais aucune n'a fonctionné.

Answer 1

Enregistrez l'instance d'événement dans un champ de classe, puis appelez cette instance dans RemoveEventListener, par exemple.

document.removeEventListener("pointermove", this.savedpointermove);

Ça devrait aller maintenant