javascript 冲突或鼠标悬停事件过多？答案

【问题标题】：Conflicting javascript or too many mouseover events?javascript 冲突或鼠标悬停事件过多？
【发布时间】：2020-04-25 19:54:20
【问题描述】：

目前，我在一张背景图片上叠加了 4 张图片。当您的鼠标悬停在每个图像上时，它会消失，直到用户刷新。我想创建 26 个图像的克隆。理想情况下，我可以定位每个图像副本，并且 jquery 会自动生成 id 名称，例如 (#myid(n)) 又名 #myid1、#myid2。由于到目前为止我无法复制此图像，因此我必须一遍又一遍地复制和粘贴每个代码块。但是，一旦我添加了第六张图片，我就遇到了性能问题，并且我的代码停止了工作。

我已经包含了两个代码笔。此 Codepen 适用于 4 个图像副本：https://codepen.io/narutofan389/collab/NWGpQWo

此 codepen 不适用于 6 个副本：https://codepen.io/narutofan389/collab/MWapQyO

我听说过多的鼠标悬停事件会导致性能问题。我不确定这是否是我问题的根源。我也在尝试使用单独的代码笔来测试具有单独 ID 的图像克隆。这是迄今为止从另一个堆栈溢出答案中获取的代码：

html

<body>
<div id="sand"></div>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

javascript

$(document).ready(function(){

      for (var i = 0; i < 2; i++) {  
          var img = "<img src ='https://s3-us-west-2.amazonaws.com/s.cdpn.io/4405662/sandsmaller.png' 
          id='myid"+i+"'/>"; 
          $("body #sand").append(img);
      }

})

我再次尝试生成可以单独定位的不同 ID？

【问题讨论】：

您的 CodePen TypeError: audio.play is not a function 出现错误。我正在使用火狐
是的，我不知道如何解决这个问题，要么我试图让音频工作，但它只有 50% 的时间工作。如果这是一个问题，我可以摆脱它。
Nvm 我添加了两次相同的代码笔，现在更新了
对此我无能为力，但如果您在帖子中引用它，我建议您链接来自 SO 的任何内容。

标签： javascript html jquery css clone

【解决方案1】：

由于您的克隆 sn-p 是在 jQuery 中，我希望使用它的解决方案是可以接受的。

首先，我必须添加标记中缺少的 #sand 容器，因为它是代码附加图像的位置。还为每个图像添加了一个 div 包装器以镜像您的 codepen（尽管您可能不需要它），并为图像添加了一个 sand 类。

然后，我没有为每个元素添加一个事件，而是使用Event delegation，因此我可以只将一个处理程序附加到包装元素。我的目标是 #sand 容器内的所有图像 not already hidden。

然后对 css 进行了一些简化，删除了多余的规则并将通用属性移到了新的类中。

for (let i = 1; i <= 6; i++) {
  // Create the wrapping div
  var $container = $("<div class='sand" + i + "'>");
  // Create the img
  var $img = $("<img src ='https://s3-us-west-2.amazonaws.com/s.cdpn.io/4405662/sandsmaller.png' class='sand' id='sand" + i + "'/>");
  // Add image to container
  $container.append($img);
  // Add container to the document
  $("body #sand").append($container);
}

// Listen when the mouse hovers an image
$('#sand').on('mouseenter', 'img.sand:not(.hide)', function() {
  $(this).addClass('hide');
});

$('#sand').on('animationend', 'img.sand.hide', function() {
  $(this).hide();
});

html {
  background: url(https://i.postimg.cc/HWJvtDGx/lockcorrect.jpg) no-repeat center center fixed;
  background-size: cover;
  height: 100%;
  overflow: hidden;
}

#bg {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
}

#bg img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
}

@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.sand {
  position: absolute;
  height: 90vh;
}

#sand6 {
  top: 0px;
  right: 200px;
}

#sand5 {
  top: 300px;
  left: 500px;
}

#sand4 {
  top: 300px;
  right: 200px;
}

.hide {
  animation: fade 3s;
  animation-fill-mode: forwards;
}

#sand3 {
  height: 100vh;
  top: 0px;
  left: 700px;
}

#sand2 {
  height: 100vh;
  top: 0px;
  left: 300px;
}

#sand1 {
  position: relative;
  height: 100vh;
  right: 30px;
}

<div id="bg">
  <img src="https://i.postimg.cc/HWJvtDGx/lockcorrect.jpg
" alt="lock">
</div>

<div id="sand">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：

虽然它允许我克隆图像，但非常感谢? 在沙子 6（沙子 7,8 等）之后，性能问题仍然存在，我必须将鼠标悬停很多才能让那些消失，但有时它们根本不会消失。我可以做些什么来提高性能？
@JacquelineTsang 我没有看到任何性能问题。那些冲突的图像……它们与其他图像重叠吗？如果有，那些更高的元素将接收mouseover 事件，因为它们仍然占用空间，因为动画涉及opacity 属性。如果您在动画结束时应用display: none，它应该按您的预期工作。
@JacquelineTsang 我已经用之前的建议更新了答案。看看它是否更适合您。