Question

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

例如，我使用onMouseOver使用

将标签背景更改为灰色

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

onMouseOut剥夺了这个背景

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

如何为onClick编写一个提供蓝色背景的调用并将其保持在那里，即使鼠标光标远离选项卡？

由于

Answer 1

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

Answer 2

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

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

Answer 3

我会在MouseOut中进行检查，只有在颜色不是蓝色时才会更改颜色。

Answer 4

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

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

Answer 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
}

Javascript onClick和onmouseover以及onmouseOut

5 个答案: