删除带有参数的 EventListener

Question

我正在尝试删除带有参数的事件侦听器。我知道在分配监听器时传递参数是行不通的，所以我终于找到了一种方法来删除监听器分配的参数。但是还是不行。

我真的不确定下一步该看哪里。

这是代码（我已经删除了与问题无关的所有内容）

let activeItemOnTheMove = false;

activeItem.addEventListener('click', e=>{   

    const defineOnMouseMove = () => { onMouseMove(activeItem) };

    if(!activeItemOnTheMove){
        document.addEventListener('mousemove', defineOnMouseMove);
        activeItemOnTheMove = true;
    }else{
        document.removeEventListener('mousemove', defineOnMouseMove);
        activeItemOnTheMove = false;
    }
})



function onMouseMove(activeItem){           
    activeItem.style.position ='absolute';
    activeItem.style.left = event.pageX + 'px';
    activeItem.style.top = event.pageY + 'px';
    activeItem.style.transform = 'translate(-50%,-50%)'
}

（我用的是原版 javascript）

我已经阅读了这些答案，这就是我理解不能使用匿名函数的方式。但是我不确定我是否理解它不起作用的根本原因。

Adding and Removing Event Listeners with parameters
Javascript removeEventListener not working

Answer 1

this is how I understood that I couldn't use an anonymous function

函数是否匿名并不重要。重要的是将 same 函数与 addEventListener 和 removeEventListener 一起使用。你的代码没有这样做，它使用了一个带有 removeEventListener 的新函数，它没有做任何事情，因为该函数没有注册为事件监听器（它只是一个不同的函数，里面有相同的代码是）。

由于您必须记住该函数，如果您愿意，也可以将该变量用作您的标志：

let activeMouseMoveHandler = null; // *** A variable to remember the function in

activeItem.addEventListener('click', e => {
    if (!activeMouseMoveHandler) {
        activeMouseMoveHandler = () => { onMouseMove(activeItem) };
        document.addEventListener("mousemove", activeMouseMoveHandler);
    } else {
        document.removeEventListener("mousemove", activeMouseMoveHandler);
    }
});

删除带有参数的 EventListener

Removing EventListeners with parameters

javascript

dom-events