Tidak dapat mengalih keluar EventListener dalam Typescript

Question

Saya cuba mengalih keluar pendengar acara dalam skrip taip. Saya menambah pendengar acara dalam pernyataan if. Dalam kenyataan lain saya cuba mengalih keluar pendengar acara ini tetapi atas sebab tertentu ia tidak mengalih keluarnya.

FYI: Saya mempunyai butang untuk menetapkan nilai boolean (movePick). Jika ini benar maka saya mahu dapat mengalihkan objek saya. Di sinilah pendengar acara dicipta. Jika saya mengklik butang itu sekali lagi, saya tidak boleh mengalihkan objek itu lagi. Itulah sebabnya saya cuba mengalih keluar pendengar acara.

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

Jika saya memadamkan senarai acara dalam pernyataan if yang sama di mana saya menambah senarai acara, mereka akan dipadamkan. Tetapi jika saya mengklik butang itu sekali lagi dan memasukkan pernyataan lain, saya tidak boleh memadamkannya. Saya juga mencuba beberapa penyelesaian dalam stackoverflow tetapi tiada satu pun daripada mereka yang berfungsi.

Answer 1

Simpan tika acara ke dalam medan kelas dan kemudian panggil tika itu dalam removeEventListener, cth.

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

Sepatutnya baik sekarang