• Home
  • Jobs
  • Courses
  • Questions
  • Teachers
  • For business
  • ES/EN

0

21
Views
Removing EventListeners with parameters

I am trying to remove an event listener with parameters. I've understood that passing arguments when assigning a listener wouldn't work, so I finally worked a way to remove the arguments for the listener assignment. But it still not working.

I'm really not sure where to look next.

Here is the code (I have removed everything that has nothing to do with the issue)

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%)'
}

(I am using vanilla javascript)

I have read these answers, this is how I understood that I couldn't use an anonymous function. But I am not sure I understand the fundamental of why it doesn't work.

  • Adding and Removing Event Listeners with parameters
  • Add an event listener with parameters and then remove it
  • Javascript removeEventListener not working
about 1 month ago ·

Juan Pablo Isaza

1 answers
Answer question

0

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

It doesn't matter whether the function is anonymous or not. What matters is using the same function with both addEventListener and removeEventListener. Your code isn't doing that, it's using a new function with removeEventListener, which doesn't do anything because that function isn't registered as an event listener (it's just that a different function with the same code in it is).

Since you have to remember the function, you can use that variable as your flag as well if you like:

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);
    }
});
about 1 month ago · Juan Pablo Isaza Report
Answer question
Find remote jobs
Loading

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2022 PeakU Inc. All Rights Reserved.