JavaScript 取消"mouseleave"事件"click"

Question

我正在研究一个问题，我无法找到解决方案。不过我还是个初学者。下面的代码是:

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)";
});

我想在mouseenter&quot上添加一个幻灯片动画但是点击"点击"该元素应该完全滑出，并且忽略任何"mouseleave"事件． 我面对的问题是……我无法取消"鼠标离开"。事件。只有当我点击"x"时，这个元素才会消失。-但那没问题。

我很感激你的帮助。

提前感谢!

Answer 1

好吧，在我绞尽脑汁几个小时后，我发现我还需要这样做:

navContact.removeEventListener ("mouseenter", navContactMouse输入

,真正的);我在mouseenter-event上也有不同的样式，它再次将元素拉回来。

经验教训:D