onmouseout與onclick衝突

好吧，我正在使用JavaScript來控制圖像交換，以便當有人點擊圖像時，它會更改爲圖像的「亮」版本。在鏈接標記中執行此操作的代碼是onclick="changeto('wdl')"，我向鏈接添加了onmouseover="changeto('wdl')"，因此當您將鼠標懸停在鏈接上時，它也會亮起。onmouseout與onclick衝突

現在，問題出現的地方自然就是當我添加onmouseout="changeto('wdd')"這是圖像的未點亮版本。這裏發生的事情當然是當我將鼠標懸停在它上面時，它會點亮，當我移動光標時它將變爲非亮起的版本。但是，當您點擊它時，它會將圖像更改爲點亮的版本，但由於命令onmouseout，它會更改爲未點亮的版本。

我想要的是能夠懸停在圖像上並點亮它。如果單擊它並移開鼠標，它將保持點亮狀態，但如果不單擊它並移開鼠標，它將保持「關閉」圖像。

任何幫助表示讚賞，我在這裏難住。我打算嘗試使用某種if (!this)類型的東西，但我真的只是不知道。

來源

2012-04-05 Corbin Holbert

一些示例代碼可能會極大地幫助您給出您正在尋找的答案。 – 2012-04-05 02:03:42

我看到了兩個解決方案：1。單獨聲明CSS類爲如下 wdd定義 onclick事件（或者使用 !important 2.使用被設置爲在 true和 onclick然後測試在 onmouseout一個標誌變量：

~~onclick="changeto('wdl');flag=true;" onmouseout="if (!flag) changeto('wdd')"~~

下面是一個簡單的例子，用CSS和Javascript：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Example</title> 
     <style> 
      #whl { 
       background: #e0e0ff; 
       line-height: 150px; 
       text-align: center; 
       width: 150px; 
      } 
      #wdl { 
       background: #e0ffe0; 
       line-height: 150px; 
       text-align: center; 
       width: 150px; 
      } 
      #whl:hover { 
       background: #ffcccc; 
      } 
      #wdl:hover { 
       background: #ffcccc; 
      } 
      #whl.selected { 
       background: #ffcccc; 
      } 
      #wdl.selected { 
       background: #ffcccc; 
      } 
     </style> 
     <script> 
      function doClick(el) { 
       document.getElementById("whl").className = document.getElementById("whl").className.replace(/(?:^|\s)selected(?!\S)/ , ''); 
       document.getElementById("wdl").className = document.getElementById("wdl").className.replace(/(?:^|\s)selected(?!\S)/ , ''); 
       el.className += "selected"; 
      } 
     </script> 
    </head> 
    <body> 
     <div id="whl" onclick="doClick(this);">WHL</div> 
     <div id="wdl" onclick="doClick(this);">WDL</div> 
    </body> 
</html>

它與顏色和你的情況，你將不得不更換背景圖片的色彩（在CSS）。

來源

2012-04-05 02:02:01

是的。首先聲明一個全局變量'flag'並將其設置爲'false'。這是一個不好的做法，但是如果沒有代碼，我不能提出任何更好的建議。 – 2012-04-05 03:05:00

我翻看了你的代碼，我找不到明顯的解決方案。我會去@josnidhin解決方案 - 使用不同的CSS類和JavaScript的點擊，但這將需要重寫您的網頁的大部分。 – 2012-04-05 04:01:24

始終歡迎:-) – 2012-04-05 05:52:57

您應該使用CSS和javascript的組合。查找CSS懸停實現鼠標懸停功能，從W3Schools的JS

CSS懸停做點擊部分http://www.w3schools.com/cssref/sel_hover.asp

來源

2012-04-05 02:01:48 Josnidhin

onmouseout與onclick衝突

回答

相關問題