删除带有参数的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)

我读了这些答案，这就是我如何理解我不能使用匿名函数。但我不确定我理解为什么它不起作用的根本原因。

• 添加和删除带有参数的事件监听器
• 添加带有参数的事件监听器，然后将其删除
• Javascript removeEventListener不工作

Answer 1

这就是我如何理解我不能使用匿名函数

函数是否匿名无关紧要。重要的是使用相同的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);
}
});