EventListener kann in Typescript nicht entfernt werden

Question

Ich versuche, Ereignis-Listener in Typoskript zu entfernen. Ich füge einen Ereignis-Listener in die if-Anweisung ein. In der else-Anweisung versuche ich, diese Ereignis-Listener zu entfernen, aber aus irgendeinem Grund werden sie nicht entfernt.

Zu Ihrer Information: Ich habe eine Schaltfläche, auf der ich einen booleschen Wert festlegen kann (movePick). Wenn das wahr ist, möchte ich mein Objekt bewegen können. Hier wird der Event-Listener erstellt. Wenn ich erneut auf die Schaltfläche klicke, kann ich das Objekt nicht mehr verschieben. Aus diesem Grund habe ich versucht, den Ereignis-Listener zu entfernen.

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);
        }**
    }

Wenn ich die Ereignisliste in derselben if-Anweisung lösche, in der ich die Ereignisliste hinzugefügt habe, werden sie gelöscht. Wenn ich jedoch erneut auf die Schaltfläche klicke und die else-Anweisung eingebe, kann ich sie nicht löschen. Ich habe auch mehrere Lösungen im Stackoverflow ausprobiert, aber keine davon hat funktioniert.

Answer 1

将事件实例保存到类字段中，然后在removeEventListener中调用该实例，例如。

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

现在应该可以了