Javascript 如果控件使用三个.js pointerlock控件解锁，则删除事件处理程序

我有一个使用threejs pointerlock控件导航的模型。当相机“注视”模型的某些部分时，单击这些部分会将您带到站点的其他部分。这一切都可以很好地工作，除了相机位于某个区域的中心，然后从指针锁中逃出的特定情况。单击返回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';}
                       }

                 }

---

我怀疑问题在于我没有正确地调用removeEventListener，但我不确定如何这样做。如果我正确调用它，有没有办法确保它正常工作？

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

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

---

这是可行的，但由于某种奇怪的原因，在我的特殊情况下，我不得不在handle函数中添加一个if语句。我怀疑那是由于锁代码有点奇怪。谢谢你，如果没有人回答的话，我会不断地捶我的头。

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