JavaScript中removeEventListener无法生效问题排查

你的代码如下：

function handleCarInfoCopy(admin) {
    function changeClipBoard(evt) {
        evt.clipboardData.setData("text/plain", "No copy allowed");
        evt.preventDefault();
    }
    if (admin === false) {
        document.addEventListener("copy", changeClipBoard, false);
    } else {
        document.removeEventListener("copy", changeClipBoard, false);
    }
}

原因分析 #

removeEventListener 要求必须传入和添加监听时完全相同的函数引用才能生效。而你的代码中，每次调用 handleCarInfoCopy 时，都会在函数内部重新定义一个全新的 changeClipBoard 函数。也就是说：

• 第一次调用 handleCarInfoCopy(false) 时，添加的是A版本的 changeClipBoard
• 后续调用 handleCarInfoCopy(true) 时，传入的是B版本的 changeClipBoard
  这两个函数代码完全一样，但属于不同的实例，所以无法匹配移除。

解决方法 #

方法1：将事件处理函数移到外部作用域

把 changeClipBoard 放在 handleCarInfoCopy 外面，确保每次调用时使用的是同一个函数引用：

function changeClipBoard(evt) {
    evt.clipboardData.setData("text/plain", "No copy allowed");
    evt.preventDefault();
}

function handleCarInfoCopy(admin) {
    if (admin === false) {
        document.addEventListener("copy", changeClipBoard, false);
    } else {
        document.removeEventListener("copy", changeClipBoard, false);
    }
}

方法2：用闭包保存函数引用

通过立即执行函数创建闭包，让 changeClipBoard 只定义一次，后续调用始终复用同一个实例：

const handleCarInfoCopy = (function() {
    // 只初始化一次的事件处理函数
    function changeClipBoard(evt) {
        evt.clipboardData.setData("text/plain", "No copy allowed");
        evt.preventDefault();
    }
    return function(admin) {
        if (admin === false) {
            document.addEventListener("copy", changeClipBoard, false);
        } else {
            document.removeEventListener("copy", changeClipBoard, false);
        }
    }
})();

这两种方法都能保证 addEventListener 和 removeEventListener 使用的是同一个函数引用，从而解决无法移除监听的问题。

内容的提问来源于stack exchange，提问作者enneenne2