自定义光标移动与悬浮功能冲突问题排查

问题概述 #

实现自定义鼠标光标效果，计划根据光标状态给body添加三类：

• cursor-moving：光标移动时
• cursor-idle：光标闲置时
• cursor-hover：光标悬浮在<a>或<button>标签上时

但实际运行时，cursor-hover类仅短暂且间歇性生效，设置的hover时背景色变化效果不稳定。

问题原因 #

1. 事件绑定错误：原代码给document绑定了mouseenter和mouseleave事件，这两个事件仅在鼠标进入/离开整个文档时触发，而非进入/离开<a>/<button>元素时触发，无法正确监听元素hover状态。
2. 目标元素判断不严谨：仅通过event.target.tagName判断，若<a>/<button>内部有子元素，event.target会指向子元素，导致hover逻辑失效。
3. 状态变量未充分利用：isCursorOverLink变量未在逻辑中使用，可能导致重复添加/移除类，引发状态混乱。

修复后的代码 #

JavaScript 代码 #

const customCursor = document.querySelector(".cursor");
let isCursorMoving = false;
let cursorIdleTimeout;
let isCursorOverLink = false;

function updateCursor(event) {
  const x = event.clientX + "px";
  const y = event.clientY + "px";

  customCursor.style.setProperty("--cursor-left", x);
  customCursor.style.setProperty("--cursor-top", y);

  if (!isCursorMoving) {
    document.body.classList.add("cursor-moving");
    document.body.classList.remove("cursor-idle");
    clearTimeout(cursorIdleTimeout);
    isCursorMoving = true; // 标记光标为移动状态
  }

  cursorIdleTimeout = setTimeout(() => {
    isCursorMoving = false;
    document.body.classList.remove("cursor-moving");
    document.body.classList.add("cursor-idle");
  }, 1000);
}

function handleLinkOver(event) {
  // 用closest判断是否处于a或button元素内，兼容子元素情况
  const target = event.target.closest("a, button");
  if (target && !isCursorOverLink) {
    document.body.classList.add("cursor-hover");
    isCursorOverLink = true;
  }
}

function handleLinkOut(event) {
  const target = event.target.closest("a, button");
  if (target && isCursorOverLink) {
    // 确保鼠标确实离开元素范围
    const rect = target.getBoundingClientRect();
    const isOutside = event.clientX < rect.left || event.clientX > rect.right ||
                      event.clientY < rect.top || event.clientY > rect.bottom;
    if (isOutside) {
      document.body.classList.remove("cursor-hover");
      isCursorOverLink = false;
    }
  }
}

document.addEventListener("mousemove", updateCursor);
// 替换事件为mouseover/mouseout，实现元素hover监听
document.addEventListener("mouseover", handleLinkOver);
document.addEventListener("mouseout", handleLinkOut);

关键修改点 #

1. 替换事件类型：将mouseenter/mouseleave改为mouseover/mouseout，这两个事件会在鼠标进入/离开元素或其子元素时触发，适合监听hover状态。
2. 增强目标判断：使用element.closest("a, button")判断鼠标是否处于<a>或<button>元素范围内，避免子元素导致的逻辑失效。
3. 优化状态管理：利用isCursorOverLink变量避免重复添加/移除类，同时在handleLinkOut中通过元素位置判断确保鼠标确实离开元素，防止误触发。
4. 修正移动状态标记：在updateCursor中添加isCursorMoving = true，确保光标移动状态标记正确。

验证效果 #

修复后，鼠标悬浮在<a>或<button>上时，cursor-hover类会稳定存在，body背景色保持黄色；离开元素时类被移除，背景色恢复原状。光标移动和闲置状态的逻辑不受影响。

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