Javascript 打开和关闭addeventlistener

您可以引入一个抽象层来管理当前活动的监听器回调.大概是ListenerManager分.

class ListenerManager {
    listeners = [];

    storeListener(typeString, callback) {
        this.listeners.push([typeString, callback]);
        // Note that this function also automatically "enables" the stored listener
        document.addEventListener(typeString, callback);
    }

    enableListeners() {
        this.listeners.forEach((listener) => document.addEventListener(listener[0], listener[1]));
    }

    disableListeners() {
        this.listeners.forEach((listener) => document.removeEventListener(listener[0], listener[1]));
    }
}

您可以这样使用它:

let manager = new ListenerManager();
manager.storeListener("keydown", myCallback1);
manager.storeListener("keydown", myCallback2);

// Let's say you want to disable them all
manager.disableListeners();

// Later you want to enable them all again
manager.enableListeners();

或者，您可以在更高的级别上执行此操作，虽然效率较低，但可能会更简单.只需使用一个全局布尔变量，所有相关的回调都会手动判断该变量，以确定它们是否应该忽略输入.

let isEventsDisabled = false;

// Your callbacks would look something like:
function myCallback1(event) {
    // Guard clauses
    if (isEventsDisabled) return; // Relevant callbacks have this added for "disabling"
    if (event.keyCode !== 16) return;

    document.activeElement.blur();
    document.getElementById("upbutton").click(); 
    document.activeElement.blur();
}

// And you would register listeners "directly" the same way you have been doing
document.addEventListener("keydown", myCallback1);

// Let's say you want to disable them all
isEventsDisabled = true;

// Later you want to enable them all again
isEventsDisabled = false;