JS mouseover事件在div元素上不生效，欲绑定mousemove到父div优化性能

问题根源 #

你的父容器#bubble_wrapper设置了pointer-events: none;，这个CSS属性会让元素完全忽略所有鼠标事件，所以绑定在它上面的mouseover、mousemove事件都无法触发。

修复方案 #

1. 调整CSS的pointer-events属性：将父容器的pointer-events改为auto，让它能接收鼠标事件；同时给气泡.bubble加上pointer-events: none;，避免气泡生成后挡住父容器的鼠标事件，也防止干扰页面其他元素的交互。
2. 替换事件绑定：把window上的mousemove事件换成绑定到父容器，这样只有鼠标在页脚区域移动时才会生成气泡，大幅降低CPU占用。

修改后的完整代码 #

HTML

<div id="bubble_wrapper"></div>

CSS

#bubble_wrapper {
  height           : 50%;
  width            : 100%;
  background-color : black;
  position         : fixed;
  bottom           : 0;
  overflow         : hidden;
  pointer-events   : auto; /* 改为auto，允许接收鼠标事件 */
}
.bubble {
  height           : max(300px, 30vw);
  width            : max(300px, 30vw);
  background-color : rgb(33, 150, 243);
  border-radius    : 100%;
  position         : absolute;
  left             : 50%;
  top              : 100%;
  animation        : wave 2s ease-in-out infinite;
  pointer-events   : none; /* 气泡不接收鼠标事件，避免干扰父容器 */
}
@keyframes wave {
  from, to { transform: translate(-50%,   0%); }
  50%      { transform: translate(-50%, -20%); }
}

JavaScript

const wrapper = document.getElementById("bubble_wrapper");

const animationBubble = (x) => {
  const bubble = document.createElement("div");
  bubble.className = "bubble";
  // 计算相对于父容器的x位置，避免clientX超出父容器范围的问题
  const relativeX = x - wrapper.getBoundingClientRect().left;
  bubble.style.left = `${relativeX}px`;
  wrapper.appendChild(bubble);
  setTimeout(() => {
    // 移除前先检查元素是否存在，避免报错
    if (wrapper.contains(bubble)) {
      wrapper.removeChild(bubble);
    }
  }, 2000)
}

// 绑定mousemove到父容器，仅在鼠标悬停时触发
wrapper.addEventListener('mousemove', (e) => {
  animationBubble(e.clientX);
});

额外优化说明 #

• 计算relativeX：使用clientX减去父容器的左偏移，确保气泡的left位置是相对于父容器的，避免鼠标在页面边缘时气泡位置异常。
• 移除气泡前检查元素存在：防止因延迟移除时元素已被其他操作删除，导致控制台报错。

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