Javascript 若我并没有点击元素，如何停止检测鼠标离开

我目前正在用HTML、CSS和JS创建一个Windows10副本

在重新创建桌面区域时，我需要选择桌面应用程序图标。我使用jquery在单击和mouseleave时对应用程序图标应用不同的样式（因此，当我单击应用程序图标时，以及当鼠标在单击后离开图标时，背景颜色会发生变化）

我还希望图标能够通过点击另一个图标来取消选择。我那部分的代码运行得很好。但是有一个问题，这是我所做的使问题出现的事情，“（）”中的文本代表我的脚本对动作的作用：

• 单击第一个应用程序图标（为单击的图标应用“单击”样式）
• 单击第二个应用程序图标（删除上一个图标的“单击”样式并应用已单击的图标）
• 将鼠标悬停在第一个应用程序图标上（不会发生任何情况）
• 鼠标离开第一个应用程序图标（“单击”样式也适用于第一个应用程序图标！（编辑：使用类，Vanquished Wombat的答案，是一个更干净的解决方案。你一定要这样做）
  使用（只调用一次）而不是上的

  
  
  $（“.desktop app box”）。在（“单击”，函数（）上{
  $（“.desktop应用程序框”）.css({
  “背景色”：“，
  “边框颜色”：”
  });
  $（this.css）({
  “背景色”：“rgba（255，255，255，0.3）”，
  边框颜色：“rgba（255、255、255、0.5）”
  });
  $（this.one（“mouseleave”，function（））{
  $（this.css）({
  “背景色”：“rgba（255，255，255，0.4）”，
  边框颜色：“rgba（255、255、255、0.6）”
  });
  });
  });
  
  .desktop{
  背景：黑色；
  颜色：白色；
  }
  .桌面应用程序盒{
  显示：内联块；
  高度：80px；
  宽度：80px；
  }
  
  回收站
  回收站
  TeamViewer 12
  回收站
  回收站
  回收站
  回收站
  回收站
  回收站
  回收站
  （编辑：使用类，战胜袋熊的答案，是一个更干净的解决方案。你应该明确地使用它）
  
  使用（只调用一次）而不是

  上的

  
  
  $（“.desktop app box”）。在（“单击”，函数（）上{
  $（“.desktop应用程序框”）.css({
  “背景色”：“，
  “边框颜色”：”
  });
  $（this.css）({
  “背景色”：“rgba（255，255，255，0.3）”，
  边框颜色：“rgba（255、255、255、0.5）”
  });
  $（this.one（“mouseleave”，function（））{
  $（this.css）({
  “背景色”：“rgba（255，255，255，0.4）”，
  边框颜色：“rgba（255、255、255、0.6）”
  });
  });
  });
  
  .desktop{
  背景：黑色；
  颜色：白色；
  }
  .桌面应用程序盒{
  显示：内联块；
  高度：80px；
  宽度：80px；
  }
  
  回收站
  回收站
  TeamViewer 12
  回收站
  回收站
  回收站
  回收站
  回收站
  回收站
  回收站
  啊，如果事件驱动编程不受意外后果法则的影响就好了
  
  通过在单击功能中设置mouseleave监听器，您正在为自己制造麻烦。值得注意的是，您没有取消设置mouseleave监听器，这会使您绊倒
  
  我获取了您的示例代码，并制作了一个运行的代码段，该代码段符合您的要求。请注意，我将鼠标移到单击之外，并创建了一个“selected”类，以使代码更易于阅读
  
  然后，将“selected”类添加到所选的任何对象并在mouseleave上删除它的技术之一。我不需要删除mouseleave侦听器，因为为每个这样的事件运行它的开销很小
  
  还有另一种技巧，你可以考虑将它应用到“状态”标记中。例如，在我的片段中，我可以通过使用“$”（“桌面”）选择“图标”来确定“查找”（“选择”）。。您可以向一个元素添加多个类，这样做作为指示状态或类似状态的手段是合法的。只是一个想法
  如果这不完全是您需要的，那么请在我的代码片段的上下文中解释您正在尝试做什么，我们可以调整它
  
  
  $（“.desktop应用程序盒”）
  .on（“单击”，函数（）{
  $（“.desktop app box.running”）.removeClass（“running”）；
  $（本）
  .addClass（“选定”）；
  })
  .on（“mouseleave”，函数（）{
  if（$（this）.hasClass（“选定”））{
  $（本）
  .removeClass（“选定”）
  .addClass（“运行”）；
  }
  })；
  /*请参见下面所选的类*/
  /*这些类只是为了让代码段正常工作*/
  桌面
  { 
  宽度：600px；高度：400px；背景色：#666666；边距：10px；
  }
  .桌面应用程序盒
  {
  光标：指针；宽度：60px；高度：50px；填充：5px；边距：5px；背景色：蓝色；边框：2px纯白；显示：内联块；字体：12px Arial；颜色：白色；文本对齐：中心；
  }
  .桌面应用程序盒跨度
  {
  页边距顶部：2px；显示：块；
  }
  /*重要提示：我创建了所选和正在运行的类，以便使用addClass（）removeClass（）更轻松地分配和删除*/
  .选定
  {
  背景色：rgba（255、255、255、0.3）；
  边框颜色：rgba（255、255、255、0.5）；
  颜色：金色；
  }
  跑步
  {
  背景色：rgba（255、255、255、0.4）；
  边框颜色：rgba（255、255、255、0.6）；
  颜色：青柠；
  )
  
  我的电脑
  回收站
  TeamViewer 12
  啊，如果事件驱动编程不受意外后果法则的影响就好了
  
  通过在单击功能中设置mouseleave监听器，您正在为自己制造麻烦。值得注意的是，您没有取消设置mouseleave监听器，这会使您绊倒
  
  我获取了您的示例代码并制作了一个运行的代码段，它符合我认为您需要的
  $(".desktop-app-box").on("click", function() {
          $(".desktop-app-box").css({
              "background-color": "",
              "border-color": ""
          });
          $(this).css({
              "background-color": "rgba(255, 255, 255, 0.3)",
              "border-color": "rgba(255, 255, 255, 0.5)"
          });
          $(this).on("mouseleave", function() {
              $(this).css({
                  "background-color": "rgba(255, 255, 255, 0.4)",
                  "border-color": "rgba(255, 255, 255, 0.6)"
              });
          });
      });
      $("html, .start, .taskbar-start-btn").on("click", function() {
          $(".desktop-app-box").css({
              "background-color": "",
              "border-color": ""
          }).removeClass("dropped");
      });
      $(".desktop-app-box").click(function(event) {
          event.stopPropagation();
          $(".desktop-app-box").removeClass("dropped");
      });
  
  <div class="desktop">
      <div class="desktop-app-box"><img src="icon/full-recycle-bin.ico"><span>Recycle Bin</span></div>
      <div class="desktop-app-box"><img src="icon/full-recycle-bin.ico"><span>Recycle Bin</span></div>
      <div class="desktop-app-box desktop-app-box-large"><img src="icon/full-recycle-bin.ico"><span>TeamViewer 12</span></div>
      <div class="desktop-app-box"><img src="icon/full-recycle-bin.ico"><span>Recycle Bin</span></div>
      <div class="desktop-app-box"><img src="icon/full-recycle-bin.ico"><span>Recycle Bin</span></div>
      <div class="desktop-app-box"><img src="icon/full-recycle-bin.ico"><span>Recycle Bin</span></div>
      <div class="desktop-app-box"><img src="icon/full-recycle-bin.ico"><span>Recycle Bin</span></div>
      <div class="desktop-app-box"><img src="icon/full-recycle-bin.ico"><span>Recycle Bin</span></div>
      <div class="desktop-app-box"><img src="icon/full-recycle-bin.ico"><span>Recycle Bin</span></div>
      <div class="desktop-app-box"><img src="icon/full-recycle-bin.ico"><span>Recycle Bin</span></div>
  </div>