我正在try 删除TypeScrip中的事件侦听器.我要在if语句中添加事件侦听器.在Else-语句中,我试图删除这些事件侦听器,但由于某种原因,它没有删除它们.

仅供参考:我有一个设置布尔值(MovePick)的按钮.如果这是真的,那么我希望能够移动我的对象.这就是创建事件列表的地方.如果我再次单击该按钮,我应该不能再移动该对象.这就是我试图删除事件监听器的原因.

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

如果我在添加事件列表的同一个if-语句中删除它们,它们也会被删除.但如果再次单击该按钮并进入Else-语句,则无法删除它们.我还在StackOverflow中try 了几种解决方案,但都不起作用.

推荐答案

将事件的实例保存到类字段中,然后调用emoveEventListener中的实例.

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

现在它应该奏效了

Javascript相关问答推荐

如何使用侧边滚动按钮具体滚动每4个格?

在React中获取数据后,如何避免不必要的组件闪现1秒?

按下同意按钮与 puppeteer 师

当运行d3示例代码时,没有显示任何内容

如何用拉威尔惯性Vue依赖下拉?

WebGL 2.0无符号整数输入变量

无法读取未定义错误的属性路径名''

如何将react—flanet map添加到remixjs应用程序

我怎么在JS里连续加2个骰子的和呢?

查询参数中的JAVASCRIPT/REACT中的括号

触发异步函数后不能显示数据

有效路径同时显示有效路径组件和不存在的路径组件

OnClick更改Json数组JSX中的图像源

更改agGRID/Reaction中的单元格格式

每隔3个项目交替显示,然后每1个项目交替显示

如何在每隔2分钟刷新OKTA令牌后停止页面刷新

递增/递减按钮React.js/Redux

如何在Reaction中设置缺省值, Select 下拉列表,动态追加剩余值?

如何从Reaction-Redux中来自API调用的数据中筛选值

如何使用Reaction/Redux创建购物车逻辑?