Javascript onClick 和 onmouseover 和 onmouseOut答案

【问题标题】：Javascript onClick and onmouseover and onmouseOutJavascript onClick 和 onmouseover 和 onmouseOut
【发布时间】：2024-01-18 18:51:01
【问题描述】：

我想问一下如何区分onClick和onMouseOver和onMouseOut。

例如，我使用 onMouseOver 将标签背景更改为灰色使用

onMouseOver="this.style.backgroundColor=Blue;"

onMouseOut 带走这个背景

onMouseOut="this.style.backgroundColor=White;"

我如何编写一个 onClick 调用，它给出一个蓝色背景，并且即使鼠标光标从选项卡上移开，它也保持在那里？

谢谢

【问题讨论】：

标签： javascript

【解决方案1】：

如果你有两个 CSS 类，“活动”和“点击”。他们都将背景设置为蓝色。单击时，您添加“单击”类。在鼠标悬停时，您添加“活动”类。鼠标移出时，您删除“活动”类。如果元素有“clicked”类，它仍然有它，因此保持它的颜色。

【讨论】：

【解决方案2】：

您需要使用事件侦听器。我建议为此使用一个框架，例如prototypejs 或jquery。

您将需要事件侦听器/观察者来观察 mouseOver、mouseOut 和 click 事件。当您的 click 事件触发时，您将停止观察 mouseOver 和 mouseOut。这应该可以解决问题。

【讨论】：

【解决方案3】：

我会检查 MouseOut，如果它还不是蓝色，它只会改变颜色。

【讨论】：

好吧，鼠标悬停的颜色也是蓝色的，所以在这种情况下它永远不会改变颜色。
OP 声明 MouseOver 上的按钮应该是灰色的（尽管代码显示为蓝色）。 OnClick 应该使按钮变成蓝色，并且当按钮被点击（蓝色）时，MouseOver 不应该改变它。这意味着只有当它不是蓝色时它才应该改变。

【解决方案4】：

通常我会向具有活动（最后点击项目）状态的元素添加一个 CSS 类。该 CSS 类可以优先于元素的正常样式。

我什至会使用 CSS 而不是 JavaScript 来更改悬停状态。

【讨论】：

【解决方案5】：

非常简单的解决方案在这里为您提供帮助。希望它对你有用。

<script type="text/javascript">
function row_mout(mout_value) {
  document.getElementById(mout_value).style.background = "#FFFFFF";
}

function row_mover(mover_value){
  document.getElementById(mover_value).style.background = "#123456";
}

function row_click(click_value) {
	if(document.getElementById('chk_'+click_value).checked == true){
		document.getElementById(click_value).style.background = "#123456";
		document.getElementById(click_value).onmouseout = "";
		document.getElementById(click_value).onmouseover = "";
	}//if over
	else if(document.getElementById('chk_'+click_value).checked == false){
		document.getElementById(click_value).style.background = "#FFFFFF";
		document.getElementById(click_value).onmouseout = function onmouseout(event){
          row_mout(click_value);
        }
		document.getElementById(click_value).onmouseover = function onmouseover(event){
          row_mover(click_value);
        }
	}//else if over
}

【讨论】：