0

I am having issues removing a listener in my JS. I have a div that when you hover over it it triggers function cardHoverGrow with html inline style "onmouseover= cardHoverGrow(this.id)". The cardHoverGrow function triggers as expected and passes the id. The parts of the function where I change the css properties of the element work as expected so I left it out.

//this function receives div id 'elemID', works fine.
function cardHoverGrow (elemID) {
  let hoverTopTemp='';
  let hoverLeftTemp='';
//{other code that changes width,height etc. of the element}//
  document.getElementById(elemID).addEventListener('mouseleave',mouseLeaveListener(elemID,hoverTopTemp,hoverLeftTemp));
}

The 'mouseleave' listener successfully creates and it succesfully triggers 'mouseLeaveListener' when the mouse leaves the element. The 'removeEventListener' inside this function is working. However, elsewhere in the code I have a function that I want to remove the listener created by cardHoverGrow (when user clicks on the element). 'dragElement' triggers fine except it doesn't remove the listener from the element.

I have checked that its the same element being targeted. I tried removing 'theLeaveListener' but then I get an error 'undefined', because it's in the other function. I wrote the listener function like I did because I needed to pass the arguments without calling the function each time 'cardHoverGrow' was called.

I want that after the 'cardHoverGrow' triggers if a user presses down on the element (not click) and triggers 'dragElement' the listener created in 'cardHoverGrow' is removed. Anyone know how I can do this?

//this function receives div id 'elemID', works fine.
function cardHoverGrow (elemID) {
  let hoverTopTemp='';
  let hoverLeftTemp='';
//{other code that changes width,height etc. of the element}//
  document.getElementById(elemID).addEventListener('mouseleave',mouseLeaveListener(elemID,hoverTopTemp,hoverLeftTemp));
}

//This successfully triggers when mouse leaves the element.
function mouseLeaveListener (elemID,hoverTopTemp,hoverLeftTemp) {
  return function theLeaveListener() {
    cardHoverShrink(elemID,hoverTopTemp,hoverLeftTemp);
    //this remove listener is working.
    document.getElementById(elemID).removeEventListener('mouseleave', theLeaveListener);
  }
}

//Somewhere else in the code I trigger 'dragElement' and 'cardHoverShrink' (succesfully) and I want to also remove the listener created at the same time.

function dragElement (globelmnt){
  //{code for adjusting CSS properties of globelmnt (element derived from document.getElementbyID). Works fine
cardHoverShrink(globelmnt.id,topadjust,leftadjust);
document.getElementById(globelmnt.id).removeEventListener('mouseleave', mouseLeaveListener());

}
sychordCoder
  • 230
  • 3
  • 14
  • 1
    Every call to `mouseLeaveListener()` creates a *new* function. Since you need *the same* function reference to remove the listener you have to save it somewhere. For example, `const listener = mouseLeaveListener(elemID,hoverTopTemp,hoverLeftTemp)`. Then use it in both places `.addEventListener('mouseleave', listener)` and `.removeEventListener('mouseleave', listener)` – VLAZ Oct 14 '20 at 04:57
  • Relevant: [How to removeEventListener that is addEventListener with anonymous function?](https://stackoverflow.com/q/5660131) | [How do I add and remove an event listener using a function with parameters?](https://stackoverflow.com/q/2991382) | [Javascript removeEventListener not working](https://stackoverflow.com/q/10444077) | [JavaScript: remove event listener](https://stackoverflow.com/q/4402287) | [removeEventListener on anonymous functions in JavaScript](https://stackoverflow.com/q/4950115) – VLAZ Oct 14 '20 at 05:00
  • Hi thank you but the issue is that when I tried const mouseLeaveListener = function theLeaveListener (elemID,hoverTopTemp,hoverLeftTemp) {code}, it would always call the function in cardHoverGrow even before the mouse leaves the element, so I had to 'wrap' it like that. – sychordCoder Oct 14 '20 at 05:12
  • Don't create new function like that but *call* your `mouseLeaveListener` - it will supply you with the function reference you need for both places. – VLAZ Oct 14 '20 at 05:17
  • hi VLAZ, I'm not sure I understand. How should I write function mouseLeaveListener? – sychordCoder Oct 14 '20 at 05:23
  • You *have* the function `mouseLeaveListener` defined. You just need to call it **once** and use the result in both places - in the `addEventListener` call and the `removeEventListener` call. – VLAZ Oct 14 '20 at 05:26
  • Am I not calling it inside the dragElement function? document.getElementById(globelmnt.id).removeEventListener('mouseleave', mouseLeaveListener()); – sychordCoder Oct 14 '20 at 05:31

0 Answers0