L'élément div ne répond pas au survol de la souris de JS

Question

Donc, j'ai un exemple de travail de base dans lequel je déplace le curseur/la souris et génère un div avec un style qui représente un motif ondulé basé sur clientX.

Seulement si je le fais addEventlistener 添加到 window 时才有效： window.onmousemove= e => AnimationBubble(e.clientX);

Ne me demandez pas à quoi sert cette fonction, et veuillez vérifier s'il y a quelque chose qui ne va pas ! Laissez-moi vous dire qu'il n'y a aucun problème/bug avec cette fonction, c'est juste une fonction simple qui accepte la souris clientX pos et génère un div avec certaines classes et le supprime après quelques secondes.

J'ai trouvé que l'ajout d'écouteurs d'événements à toute la fenêtre est inutile, alors que le div n'est généré que si mousemove eventlistener 添加到父 div 中，我可以节省大量 CPU 使用率。指示仅当用户将鼠标悬停在 parent div/container est au dessus. Je pense l'ajouter à la section de pied de page pour la rendre plus interactive pour les utilisateurs.

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

Ajoutez simplement la classe CSS : pointer-events: none; 替换为 cursor: none; 为 #bubble_wrapper et cela devrait fonctionner comme prévu :)

J'espère que cela vous aidera !