JavaScript点击元素后如何取消对应mouseleave事件的触发效果

核心问题原因 #

你当前代码仅移除了mouseleave事件监听，但mouseenter事件仍处于绑定状态，点击导航后如果鼠标重新移入元素，仍会触发hover动画覆盖点击后设置的表单状态。

修复方案 #

有两种实现方式可选：

方式1：绑定/解绑事件实现 #

点击导航时同时移除两个hover事件的监听，关闭表单时再重新绑定即可，完整代码如下：

var navContact = document.getElementsByClassName("nav-l")[0];
var contactForm = document.getElementsByClassName("kontakt")[0];
// 请将下方close-btn替换为你实际使用的关闭按钮类名
var closeBtn = document.getElementsByClassName("close-btn")[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)";
}

// 初始绑定hover事件
navContact.addEventListener("mouseenter", navContactMouseEnter, true);
navContact.addEventListener("mouseleave", navContactMouseLeave, true);

navContact.addEventListener("click", (e) => {
  e.preventDefault();
  // 同时移除两个hover事件监听，避免hover效果干扰激活态
  navContact.removeEventListener("mouseenter", navContactMouseEnter, true);
  navContact.removeEventListener("mouseleave", navContactMouseLeave, true);
  navContact.style.paddingLeft = "5vw";
  contactForm.style.transform = "translateX(0vw)";
});

// 关闭按钮逻辑
closeBtn.addEventListener("click", (e) => {
  e.preventDefault();
  // 重新绑定hover事件
  navContact.addEventListener("mouseenter", navContactMouseEnter, true);
  navContact.addEventListener("mouseleave", navContactMouseLeave, true);
  // 重置样式到初始状态
  navContact.style.paddingLeft = "0vw";
  contactForm.style.transform = "translateX(-31vw)";
});

方式2：状态变量控制（更推荐） #

不用频繁操作事件监听，新增一个状态变量标记表单是否激活，hover事件触发时判断状态再决定是否执行逻辑，代码更易维护：

var navContact = document.getElementsByClassName("nav-l")[0];
var contactForm = document.getElementsByClassName("kontakt")[0];
var closeBtn = document.getElementsByClassName("close-btn")[0];
// 新增状态变量，标记表单是否处于激活状态
var isFormActive = false;

var navContactMouseEnter = function (e) {
  // 表单已激活时直接返回，不执行hover动画
  if (isFormActive) return;
  console.log("mouse entered!");
  navContact.style.paddingLeft = "5vw";
  contactForm.style.transform = "translateX(-25vw)";
}

var navContactMouseLeave = function (e) {
  if (isFormActive) return;
  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();
  isFormActive = true;
  navContact.style.paddingLeft = "5vw";
  contactForm.style.transform = "translateX(0vw)";
});

closeBtn.addEventListener("click", (e) => {
  e.preventDefault();
  isFormActive = false;
  navContact.style.paddingLeft = "0vw";
  contactForm.style.transform = "translateX(-31vw)";
});

内容的提问来源于stack exchange，提问作者canny