javascript - 如果我没有点击元素，如何停止检测鼠标离开

Question

我目前正在使用 HTML、CSS 和 JS 创建 Windows 10 副本。

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

我还希望能够通过单击另一个图标来取消选择图标。我那部分的代码运行良好。但是有一些问题，这是我所做的导致问题出现的原因，“()”中的文本代表我的脚本对操作的作用:

• 点击第一个应用程序图标(对点击的图标应用“点击”样式)
• 点击第二个应用程序图标(删除前一个图标的“点击”样式并应用点击图标)
• 将鼠标悬停在第一个应用程序图标上(没有任何反应)
• 鼠标离开第一个应用程序图标(“点击”样式也适用于第一个应用程序图标!<- 这不应发生，在这种情况下不应发生任何事情)

我想如果这是事件监听器的问题，我尝试使用 .off() 来阻止它发生但它失败了。

这是我的代码:

javascript代码

$(".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");
    });

HTML代码

<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>

其他脚本:

• jquery 3.2.1
• jquery 用户界面 1.12.1
• jquery 1.7.2

我已尽力描述问题，请告诉我是否需要澄清任何部分或提供更多信息。非常感谢!

Answer 1

(编辑:使用类，Vanquished Wombat 的回答，是一个更简洁的解决方案。你应该明确地使用它)

使用 event-binder one (只会被调用一次)而不是 on。

    $(".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).one("mouseleave", function() {
            $(this).css({
                "background-color": "rgba(255, 255, 255, 0.4)",
                "border-color": "rgba(255, 255, 255, 0.6)"
            });
        });
    });
    

.desktop {
  background: black;
  color: white;
}

.desktop-app-box {
  display: inline-block;
  height: 80px;
  width: 80px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>