Vanilla JS自定义视频控制器：鼠标从视频区域移至控制栏时立即隐藏的异常问题排查

你遇到的核心问题是事件触发逻辑的缺陷，以及重复绑定事件导致的混乱，下面详细拆解并给出修复方案：

原代码的核心问题 #

1. 错误的mouseleave触发时机 #

当鼠标从videoElement移动到覆盖在它上方的videoControls时，浏览器会先触发videoElement的mouseleave事件，你的代码此时直接调用hideVideoControls()。虽然随后videoControls的mouseover会触发showVideoControls()，但hideVideoControls()中设置的opacity: 0和延迟修改z-index的逻辑，会导致控制栏出现闪烁甚至直接隐藏的问题——因为样式修改的优先级和事件执行的细微顺序，可能让隐藏操作“盖过”显示操作。

2. 重复绑定mousemove事件 #

在videoControls的mouseover处理函数中，你每次鼠标进入都会绑定一次mousemove事件，这会导致同一个事件被多次绑定，触发次数指数级增长。最终可能出现多次调用resetTimeout()，导致定时器逻辑混乱，控制栏的显示/隐藏行为不可预期。

修复后的代码方案 #

我们可以通过监听父容器的事件来统一处理，避免单个元素的事件冲突，同时移除重复的事件绑定：

const videoContainer = document.querySelector(".lightbox");
const videoElement = document.querySelector(".lightbox__media");
const videoControls = document.querySelector(".lightbox__videocontrols");
let controlsTimeout = null;

// 统一处理显示控制栏并重置定时器的逻辑
function showControlsAndResetTimer() {
  showVideoControls();
  resetTimeout();
}

// 监听容器的鼠标进入，以及视频、控制栏的鼠标移动事件
videoContainer.addEventListener("mouseenter", showControlsAndResetTimer);
videoElement.addEventListener("mousemove", showControlsAndResetTimer);
videoControls.addEventListener("mousemove", showControlsAndResetTimer);

// 只有当鼠标完全离开整个视频容器时，才隐藏控制栏
videoContainer.addEventListener("mouseleave", function () {
  hideVideoControls();
  clearActiveTimeout();
});

function showVideoControls() {
  videoControls.style.opacity = 1;
  videoControls.style.zIndex = 100;
}

function hideVideoControls() {
  videoControls.style.opacity = 0;
  setTimeout(function () {
    videoControls.style.zIndex = -1;
  }, 400); // 配合opacity过渡延迟修改z-index
}

function resetTimeout() {
  clearActiveTimeout();
  controlsTimeout = setTimeout(hideVideoControls, 3000);
}

// 提取清除定时器的公共逻辑，避免重复代码
function clearActiveTimeout() {
  if (controlsTimeout) {
    clearTimeout(controlsTimeout);
    controlsTimeout = null;
  }
}

修复逻辑说明 #

1. 统一监听父容器事件：用.lightbox容器的mouseleave来触发控制栏隐藏，这样只有当鼠标完全离开整个视频相关区域（包括控制栏）时才会执行隐藏操作，解决了鼠标从视频移到控制栏时的误触发问题。
2. 移除重复事件绑定：将mousemove事件直接绑定到对应元素上，只绑定一次，避免事件重复触发导致的定时器混乱。
3. 简化公共逻辑：提取clearActiveTimeout函数，减少重复代码，让逻辑更清晰。

你后来用鼠标位置跟踪的方法解决问题，其实原理和这个方案类似——都是判断鼠标是否处于整个视频相关区域内，而不是单个元素的范围。

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