I'm working on a problem where I'm not able to find a solution. I'm still a beginner though. Here the code:

var navContact = document.getElementsByClassName("nav-l")[0];
var contactForm = document.getElementsByClassName("kontakt")[0];

var navContactMouseEnter = function (e) {
  console.log("mouse entered!");
  navContact.style.paddingLeft = "5vw";
  contactForm.style.transform = "translateX(-25vw)";
}

var navContactMouseLeave = function (e) {
  console.log("mouse left!");
  navContact.style.paddingLeft = "0vw";
  contactForm.style.transform = "translateX(-31vw)";
}

navContact.addEventListener("mouseenter", navContactMouseEnter, true);
navContact.addEventListener("mouseleave", navContactMouseLeave, true);

navContact.addEventListener("click", (e) => {
  e.preventDefault();
  navContact.removeEventListener("mouseleave", navContactMouseLeave, true);
  navContact.style.paddingLeft = "5vw";
  contactForm.style.transform = "translateX(0vw)";
});

I'm trying to get a little slideIn Animation on "mouseenter" but on "click" that element should slideout completely and ignore any "mouseleave" event. There I'm faceing the issues... I'm not able to cancel the "mouseleave" event. That element should only disappear when I click on "X" - but thats no problem.

I'm grateful for any help.

Thanks in advance!