2017-07-29 64 views
1

我目前正在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

我已經盡我所能來描述問題,請告訴我,如果我需要澄清任何部分或應提供任何信息。非常感謝!

回答

3

(編輯:使用類,戰敗袋熊的答案,是一個更清潔的解決方案,您應該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>

+0

感謝彼得 - 我投你了,因爲它是一個更簡潔的答案OP的具體錯誤。儘管我認爲他可以從一個更好的技術中獲益,從長遠來看他會更好地爲他服務。 –

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>