Mousemove与Mouseenter事件无法同时生效问题求助

首先，我先梳理下你的情况：你做了一个带波纹效果的按钮，mouseenter能正常触发波纹，但遇到了mousemove事件不生效的问题。结合你的代码，我分两种常见情况来帮你排查和解决：

情况1：页面上的鼠标圆圈/点不跟随鼠标移动（body的mousemove没生效） #

如果是这个问题，大概率是CSS配置或元素定位的问题：

• 首先确认.mouse-circle和.mouse-dot的CSS设置了position: absolute（或fixed），不然top和left属性不会生效。你需要添加这类基础样式：

.mouse-circle, .mouse-dot {
  position: absolute;
  pointer-events: none; /* 避免遮挡其他元素的事件响应 */
  opacity: 0;
  transition: opacity 0.2s ease;
}

• 检查页面上有没有其他元素设置了pointer-events: none，或者通过event.stopPropagation()阻止了事件冒泡到body上。
• 可以在body的mousemove事件里加一行console.log(x,y)，如果控制台能输出坐标，说明事件正常触发，只是样式没生效；如果没输出，那就是事件绑定时机有问题——如果你的脚本放在<head>里，需要把所有代码包裹在DOMContentLoaded事件里，确保DOM加载完成后再执行：

document.addEventListener("DOMContentLoaded", () => {
  // 把你的所有JS代码放在这里面
});

情况2：你想给按钮添加鼠标移动时的变色效果，但未实现 #

你的代码目前只给按钮做了mouseenter和mouseleave的波纹效果，没有处理mousemove的变色逻辑。如果是这个需求，你可以这样修改：

1. 给按钮添加mousemove事件监听，根据鼠标在按钮内的位置动态变色：

mainBtn.addEventListener("mousemove", (e) => {
  const btnRect = e.currentTarget.getBoundingClientRect();
  // 获取鼠标在按钮内的相对坐标（范围0到按钮的宽/高）
  const relX = e.clientX - btnRect.left;
  const relY = e.clientY - btnRect.top;
  
  // 示例：根据X轴位置计算HSL色相值，实现渐变变色
  const hue = Math.floor((relX / btnRect.width) * 360);
  mainBtn.style.backgroundColor = `hsl(${hue}, 80%, 60%)`;
});

2. 鼠标离开按钮后恢复原颜色，在mouseleave事件里补充一行：

mainBtn.addEventListener("mouseleave",() => {
   mainBtn.removeChild(ripple);
   mainBtn.style.backgroundColor = ""; // 恢复按钮默认背景色
});

另外，你的波纹效果有个小隐患：如果快速多次进出按钮，可能会因为ripple变量被覆盖而报错（比如removeChild找不到元素）。可以改成下面的写法优化：

mainBtn.addEventListener("mouseenter",(e) =>{
  const left = e.clientX - e.currentTarget.getBoundingClientRect().left;
  const top = e.clientY - e.currentTarget.getBoundingClientRect().top;

  const ripple = document.createElement("div");
  ripple.classList.add("ripple");
  ripple.style.left = `${left}px`;
  ripple.style.top = `${top}px`;
  mainBtn.prepend(ripple);
  
  // 波纹动画结束后自动移除，避免内存占用和报错
  ripple.addEventListener("animationend", () => {
    ripple.remove();
  });
});

// 移除原来mouseleave事件里的removeChild逻辑

这样不管怎么快速进出按钮，都不会出现报错问题啦～

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