Question

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

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

我还希望通过单击另一个图标来取消选择图标。我对该部分的代码运行良好。但是有一些问题，这就是我所做的让问题出现的问题，“（）”中的文字代表我的脚本为行动所做的事情：

点击第一个应用程序图标（对点击的图标应用“点击”样式）

点击第二个应用图标（删除前一个图标的“点击”样式并申请点击图标）

悬停在第一个应用图标上（没有任何反应）

鼠标离开第一个应用程序图标（“点击”样式也适用于第一个应用程序图标！＆lt; - 这不应该发生，在这种情况下不会发生任何事情）

我认为如果这是事件监听器的问题，我试图使用.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＆＃39的答案，是一个更清洁的解决方案。你应该明确地去做）

使用event-binder one（只会调用一次）而不是on。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

啊，如果只有事件驱动的编程没有受到意外后果的法则的影响。

通过在click函数中设置mouseleave侦听器，您正在为自己做事。值得注意的是，你没有取消设置让你绊倒的mouseleave监听器。

我拿了你的示例代码并创建了一个运行代码片段，它可以完成我认为你想要的代码。请注意，我在点击之外进行了鼠标选择，并创建了一个选中的＆＃39;类使更容易阅读代码。

然后，该技术就是添加“所选择的＆＃39;选择任何选定的类并在mouseleave上删除它。我不需要删除mouseleave监听器，因为为每个这样的事件运行它的开销很小。

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

如果这不完全符合您的要求，请在我的代码段的上下文中解释您要执行的操作，我们可以对其进行调整。

＆＃13;

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

＆＃13;

/* 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;
)

＆＃13;

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

＆＃13;

如果我没有点击元素

2 个答案: