RemoveEventListener不适合接触和鼠标侦听器

Question

我参加了一堂课，以跟踪不同的事件侦听器，以便使元素更容易，更简化地从元素中添加和删除事件侦听器。删除了该类的版本：

class ElementListenerState {
    /**
     * @param {object} element - pass DOM element to track listeners for (required)
     * @param {[object]} initialListeners - Initial list of Listeners to register (optional)
     * @returns
     */
    constructor(element, initialListeners = []) {
        this.element = element;
        this.currentListeners = initialListeners || [];
    }
    /**
     *
     * @returns {[]} a copy array of currentListeners
     */
    getCurrentListeners() {
        return [...this.currentListeners];
    }

    setCurrentListeners(arr) {
        this.currentListeners = arr;
    }

    removePrevListeners() {
        const prevListeners = this.getCurrentListeners();
        prevListeners.forEach((listener) => {
            this.element.removeEventListener(
                listener.eventType,
                listener.callback
            );
        });
        this.setCurrentListeners([]);
    }

    removeListenerType(type) {
        const currentListeners = this.getCurrentListeners();
        const listenersToRemove = currentListeners.filter(
            (listener) => listener.eventType === type
        );
        // if(!listenersToRemove.length) console.warn(`No listeners with type ${type} found.`)
        listenersToRemove.forEach((listener) => {
            this.element.removeEventListener(
                listener.eventType,
                listener.callback
            );
            currentListeners.splice(
                currentListeners.findIndex((listenerInArr) =>
                    listenerInArr === listener
                )
            );
        });
        this.setCurrentListeners(currentListeners);
    }

    /**
     *
     * @param {object} listener
     * @returns Error code -1 will be returned if listener is already registered, nothing will be returned if method was successful.
     */
    addListener(listener) {
        // Return error code if listener already registered in list
        if (this.getCurrentListeners().includes(listener)) {
            console.warn("Provided listener is already registered in list!");
            return -1;
        }
        this.element.addEventListener(listener.eventType, listener.callback);
        const newListeners = this.getCurrentListeners();
        newListeners.push(listener);
        this.setCurrentListeners(newListeners);
    }
}

我还有一个较小的类，用于以正确的格式生成侦听器，以与elementListenerstate类一起使用：

class ListenerObject {
    /**
     *
     * @param {string} eventType represents the type of event listener
     * @param {function} handler callback function for event listener
     * @param {[]} args Array of arguments (in proper order) for callback function, defaults to empty array
     */
    constructor(eventType, handler, args = []) {
        this.eventType = eventType;
        this.callback = (e) => handler(e, ...args);
    }
}

该功能在添加和删除大多数事件的听众时都与两个类别的预期工作，但是如果事件侦听器类型是“ MouseUp”或“ TouchEnd”，从CurrentListeners数组中删除了侦听器，但实际上并未从DOM元素中删除。当使用removePrevlisteners方法和removelistEnertype事件时，此问题就会发生。

由于我代码中的所有触摸端和鼠标事件都在删除ElementListEnsteNertate对象中的其他事件侦听器，但是Chrome Dev工具显示这些事件仍然附加了错误，因此没有任何错误打印到控制台上。

在这两种方法中，该函数均来自侦听器的回调属性，因此该函数应该是在AddListener中应用的确切函数，而不是副本。

我不确定问题来自何处，或者为什么仅在MouseUp中发生并接触到事件。有人有洞察力吗？

为了清楚起见，应用鼠标up并在我的代码中触摸事件时，我没有指定任何ARG，但这不是一个问题，因为我对某些Mousemove和TouchMove事件进行了相同的操作，这些事件确实可以通过removelistEnertype方法正确地删除。

Answer 1

在关闭之前回答我自己的问题：事实证明，问题与事件类型无关，而是一种不好的拼接方法。在我的removelistenertype方法中，我有逻辑可以从注册列表的副本中删除发现的侦听器，然后将列表设置为已更新的注册侦听器。我以某种方式忘记了将第二个参数添加到剪接方法中，无意中删除了在发现的侦听器之后出现的任何阵列中出现的任何内容，以防止删除Prevlevlisteners或RemovelisTenerType在下一个呼叫上正常工作。尴尬的错误，但我想这会发生。