如果控件使用three.js指针锁定控件解锁，则移除事件处理程序

Question

我有一个使用threejs pointerlock控件导航的模型。当摄像机“看着”模型的某些部分时，单击它们会将您带到站点的其他部分。这一切都很好用，除了特定的情况下，相机位于某一部分的中心，并且您可以逃出点锁。单击返回到点锁定状态不仅会捕获鼠标，还会调用事件处理程序并将用户发送到别处。

解决方案是删除事件处理程序，但我这样做的代码不起作用。这是for语句的代码，该语句定义要单击的空间的边界框并添加侦听器。

for (var p = 0; p < panels.length; p++ ) {
    //console.log(p);
    if (point_x <= panels[p].x_max && point_x >= panels[p].x_min) {
        x_value = "true";
        if (point_y <= panels[p].y_max && point_y >= panels[p].y_min) {
            y_value = "true";
            if (point_z <= panels[p].z_max && point_z >= panels[p].z_min) {
                z_value = "true";
                clickthrough.innerHTML = panels[p].wall.charAt(0).toUpperCase() + panels[p].wall.slice(1) + " Wall, " + "Panel " + panels[p].panel;
                clickthrough.style.display = 'block';
                //console.log(panels[p].wall.charAt(0).toUpperCase() + name.slice(1) + " Wall, " + "Panel " + panels[p].panel);

                if (controls.isLocked) {
                    console.log ('controls locked');
                    window.addEventListener( 'click', function () {

                    window.location.href = panels[p].url;

                    }, false );
                }
                else {
                    console.log ('controls unlocked');
                    window.removeEventListener( 'click', function () {

                    window.location.href = panels[p].url;

                      });
                    }

                    break;
                  }
                  else {    z_value = "false";
                        clickthrough.style.display = 'none';}}
                  else {    y_value = "false";
                        clickthrough.style.display = 'none';}}
                  else {z_value = "false";
                        clickthrough.style.display = 'none';}
                       }

                 }

生成或删除窗口监听程序的特定部分为：

    if (controls.isLocked) {
        console.log ('controls locked');
        window.addEventListener( 'click', function () {
    
        window.location.href = panels[p].url;
    
          }, false );
        }
        else {
                console.log ('controls unlocked');
                window.removeEventListener( 'click', function () {window.location.href = panels[p].url;});
        }

我怀疑问题是我没有正确调用removeEventListener，但我不确定如何做到这一点。如果我调用它是正确的，有什么方法可以确保它正常工作吗？

Answer 1

您提供的代码是添加和删除两个不同的函数：

if (controls.isLocked) {
    console.log ('controls locked');
    window.addEventListener( 'click', function () {

        // this function instance
        window.location.href = panels[p].url;

    } );
} else {
    console.log ('controls unlocked');
    window.removeEventListener( 'click', function () {

        // is different from this function instance
        window.location.href = panels[p].url;

    } );
}

如果您希望稍后删除已添加为事件侦听器的函数，则需要保存原始函数引用的句柄：

const originalFunction = function () {

    window.location.href = panels[p].url;

};

if (controls.isLocked) {
    console.log ('controls locked');
    window.addEventListener( 'click', originalFunction );
} else {
    console.log ('controls unlocked');
    window.removeEventListener( 'click', originalFunction );
}