如何停止檢測鼠標離開如果我沒有點擊元素

Question

我目前正在HTML，CSS和JS中創建一個Windows 10副本。

重新創建桌面區域時，我需要使桌面應用程序圖標可選。我使用jquery將不同的樣式應用於單擊和鼠標左鍵上的應用程序圖標（所以當我點擊它時鼠標離開後的背景顏色會發生變化，點擊後會出現）。

我也希望能夠通過點擊另一個圖標取消選擇圖標。我的那部分代碼運行良好。但是有一些問題，這裏是我這樣做，使問題出現，文中的「（）」代表什麼我的腳本做的動作：

• 點擊第一個應用程序圖標（應用「點擊」風格對於點擊圖標）
• 點擊第二個應用程序圖標（刪除「單擊」樣式前面的圖標，並申請點擊圖標）在1日的應用程序圖標
• 懸停（沒有任何反應）
• 鼠標離開1號的應用程序圖標（「點擊「風格也適用於第一個應用程序圖標！< - 這不應該發生，在這種情況下不應該發生）

我想如果它是事件監聽器的問題，我試圖使用.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

（編輯：使用類，戰敗袋熊的答案，是一個更清潔的解決方案，您應該definetely與去。）

使用的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>

Answer 2

嗯，如果只是事件驅動編程並沒有從非預期後果法則受到影響。

通過在click函數中設置mouseleave偵聽器，您正在努力爲自己做好準備。值得注意的是，你不會忽略掉你的老鼠偵聽器。

我把你的示例代碼，並做了一個正在運行的片段，它做我認爲你想要的。請注意，我將鼠標移到了點擊之外，並創建了一個「選定」類，以便於閱讀代碼。

然後，該技術就是將「選定」類添加到選定的任何內容，並在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>