所以，我有一個基本的工作範例，我移動遊標/滑鼠，產生一個具有某些樣式的 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%); }
  }

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