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

回答

相关问题