elemen div tidak bertindak balas kepada JS onmouseover

Question

Jadi, saya mempunyai contoh kerja asas di mana saya menggerakkan kursor/tetikus dan menjana div dengan beberapa penggayaan yang mewakili corak beralun berdasarkan clientX.

Hanya jika saya mahu addEventlistener 添加到 window 时才有效： window.onmousemove= e => AnimationBubble(e.clientX);

Jangan tanya saya apa fungsi ini, atau sila semak jika ada masalah dengannya! Biar saya beritahu anda, tiada isu/pepijat dengan fungsi ini, ia hanyalah fungsi mudah yang menerima tetikus clientX pos dan menjana div dengan beberapa kelas dan mengalih keluarnya selepas beberapa saat.

Saya mendapati bahawa menambah pendengar acara pada keseluruhan tetingkap tidak berguna, manakala div hanya dijana jika mousemove eventlistener 添加到父 div 中，我可以节省大量 CPU 使用率。指示仅当用户将鼠标悬停在 parent div/container berada di atas. Saya sedang berfikir untuk menambahkan ini pada bahagian pengaki untuk menjadikannya lebih interaktif untuk pengguna.

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>

Answer 1

Hanya tambah kelas css: pointer-events: none; 替换为 cursor: none; 为 #bubble_wrapper dan ia sepatutnya berfungsi seperti yang diharapkan :)

Semoga ini membantu!