JS onmouseover 不适用于 div 元素答案

【问题标题】：JS onmouseover does not work on div elements [closed]JS onmouseover 不适用于 div 元素
【发布时间】：2022-11-03 23:37:41
【问题描述】：

所以，我有一个基本的工作示例，我移动光标/鼠标，生成带有一些样式的 div，表示基于clientX 的波浪状模式。

仅当我将addEventlistener 添加到window 时才有效：window.onmousemove= e => animationBubble(e.clientX);

不要问我这个功能是做什么的，或者请检查它是否有任何问题！让我告诉你，函数中没有问题/错误，它只是一个简单的函数，它使用鼠标 clientX pos 并生成具有某些类的 div，几秒钟后将其删除。

我发现将事件监听器添加到整个窗口是没有用的，而如果我将 mousemove eventlistener 添加到父 div，我可以节省大量 CPU 使用率。指示仅当用户将鼠标悬停在parent div/container 上时才生成 div。我正在考虑将其添加到页脚部分，以使其对用户更具交互性。

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

const animationBubble = (x) => {
  const bubble = document.createElement("div");
  bubble.className = "bubble";
  bubble.style.left = `${x}px`;
  wrapper.appendChild(bubble);
  setTimeout(() => wrapper.removeChild(bubble), 2000)
}

// wrapper.addEventListener('mouseover', (e) => {
//     console.log("hi")
//     animationBubble(e.clientX);
// });

window.onmousemove = e => animationBubble(e.clientX);

#bubble_wrapper {
  height           : 50%;
  width            : 100%;
  background-color : black;
  position         : fixed;
  bottom           : 0;
  overflow         : hidden;
  pointer-events   : none;
  }
.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;
}
@keyframes wave {
  from, to { transform: translate(-50%,   0%); }
  50%      { transform: translate(-50%, -20%); }
  }

&lt;div id="bubble_wrapper"&gt;&lt;/div&gt;

【问题讨论】：

在问题本身中提供调试详细信息。您甚至在发布之前收到警告，codepen 必须直接在问题本身中随附代码
你认为pointer-events: none; 是什么意思？
@Keith 意味着它隐藏了用户指针，对吧？好吧，如果是这样，我想知道它是如何为window.addEventListener 工作的。对不起，代码笔真的让我想不到我可以使用 sn-p 工具 T_T。
不，它只是防止指针事件。请改用cursor: none;。

标签： javascript html css dom

【解决方案1】：

只需将 css 类：pointer-events: none; 替换为 cursor: none; for #bubble_wrapper，它应该可以按预期工作:)

希望我能帮上忙！

【讨论】：