Ich habe also ein einfaches Arbeitsbeispiel, bei dem ich den Cursor/die Maus bewege und ein Div mit einem Stil erzeuge, der ein Wellenmuster basierend auf clientX darstellt.

Nur wenn ich will addEventlistener 添加到 window 时才有效： window.onmousemove= e => AnimationBubble(e.clientX);

Fragen Sie mich nicht, was diese Funktion macht, und prüfen Sie bitte nicht, ob etwas damit nicht stimmt! Lassen Sie mich Ihnen sagen, dass es mit dieser Funktion keine Probleme/Bugs gibt, es ist nur eine einfache Funktion, die Mauspositionen akzeptiert, ein Div mit einigen Klassen generiert und es nach ein paar Sekunden entfernt. clientX

oben ist. Ich denke darüber nach, dies zum Fußzeilenbereich hinzuzufügen, um es für Benutzer interaktiver zu machen. mousemove eventlistener 添加到父 div 中，我可以节省大量 CPU 使用率。指示仅当用户将鼠标悬停在 parent div/container

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%); }
  }

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