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

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 UI 1.12.1
• jQuery 1.7.2

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

Answer 1

（编辑：使用类，Vanquished Wombat的答案，是一种更干净的解决方案。您应该明确地同意这一点）

使用事件绑定器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> 

Answer 2

嗯，如果仅事件驱动的编程不会遭受意外后果定律的折磨。

通过在click函数中设置mouseleave侦听器，您自己很难做。 值得注意的是，您不会取消会使您绊倒的mouseleave侦听器。

我拿了您的示例代码，并编写了一个运行片段，该片段可以满足我的需求。 请注意，我将鼠标悬停在单击之外，并创建了一个“ selected”类以使其更易于阅读代码。

然后，该技术就是将“选定的”类添加到选定的任何对象并在mouseleave上将其删除的方法之一。 我不需要删除mouseleave侦听器，因为为每个此类事件运行它几乎没有开销。

您可能会发现还有另一种有用的技术，即将类用作“状态”标记。 例如，在我的代码段中，我可以使用$（'。desktop'）。find（'。selected'）通过代码确定“选择”了哪个图标。 您可以向一个元素添加多个类，这样做是合法的，以指示状态或类似状态。 只是一个想法。

如果这不是您真正需要的，请在我的代码段的背景下解释您要做什么，我们可以对其进行调整。

 $(".desktop-app-box") .on("click", function() { $(".desktop-app-box.running").removeClass("running"); $(this) .addClass("selected"); }) .on("mouseleave", function() { if ($(this).hasClass("selected")){ $(this) .removeClass("selected") .addClass("running"); } }); 

 /* See the selected class below.... */ /* These classes are just to get the snippet working. */ .desktop { width: 600px; height: 400px;background-color: #666666;margin: 10px; } .desktop-app-box { cursor: pointer;width:60px; height: 50px;padding: 5px;margin: 5px;background-color: blue;border: 2px solid white;display: inline-block;font: 12px Arial;color: white;text-align: center; } .desktop-app-box span { margin-top: 2px;display: block; } /* Important: I created the selected & running classes to make assignment & removal easier with addClass() removeClass() */ .selected { background-color: rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.5); color: gold; } .running { background-color: rgba(255, 255, 255, 0.4); border-color: rgba(255, 255, 255, 0.6); color: lime; ) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <div class="desktop"> <div class="desktop-app-box"><i class="fa fa-laptop fa-2x" aria-hidden="true"></i><span>My Computer</span></div> <div class="desktop-app-box"><i class="fa fa-recycle fa-2x" aria-hidden="true"></i><span>Recycle Bin</span></div> <div class="desktop-app-box"><i class="fa fa-users fa-2x" aria-hidden="true"></i><span>TeamViewer 12</span></div> </div>