Estoy tratando de eliminar un detector de eventos con parámetros. Entendí que pasar argumentos al asignar un oyente no funcionaría, así que finalmente trabajé en una forma de eliminar los argumentos para la asignación del oyente. Pero todavía no funciona.
Realmente no estoy seguro de dónde buscar a continuación.
Aquí está el código (he eliminado todo lo que no tiene nada que ver con el problema)
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%)' }(Estoy usando vainilla javascript)
He leído estas respuestas, así es como entendí que no podía usar una función anónima. Pero no estoy seguro de entender el fundamento de por qué no funciona.
así entendí que no podía usar una función anónima
No importa si la función es anónima o no. Lo que importa es usar la misma función con addEventListener y removeEventListener . Su código no está haciendo eso, está usando una nueva función con removeEventListener , que no hace nada porque esa función no está registrada como un detector de eventos (es solo que es una función diferente con el mismo código).
Como tiene que recordar la función, también puede usar esa variable como su bandera si lo desea:
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); } });