Question

onclick和mouseout的矛盾

对于每张图片，想实现：鼠标悬停就显示：ID_ON.PNG，鼠标移出就显示：ID.PNG，而点击也显示:ID_ON.PNG。下面的代码的问题是：鼠标点击一张图片过后鼠标移出此图片，图片依然执行mouseout变成ID.PNG，我想要的效果是ID_ON.PIG。请问怎么判断点击了就不执行mouseout方法了？非常谢谢你！
$(document).ready(function(){
$(".dh li").click(function(){
var $img_name=$(this).children('img').attr("id");
var $img_on="images/"+$img_name+"_on.png";
var $other=$(".dh img").not("#"+$img_name);
$(this).children("img").attr("src",$img_on);
$other.each(function(){
$(this).attr("src","images/"+$(this).attr("id")+".png");
});
});

$(".dh li").mouseover(function(){
var $img_name=$(this).children('img').attr("id");
var $img_on="images/"+$img_name+"_on.png";
$(this).children("img").attr("src",$img_on);
});
$(".dh li").mouseout(function(){
var $img_name=$(this).children('img').attr("id");
var $img_out="images/"+$img_name+".png";
$(this).children("img").attr("src",$img_out);
});
});
HTML：
<ul class="dh">
<li id="home"><img id="home" src="images/home.png" /></li>
<li id="club"><img id="club" src="images/club.png" /></li>
<li id="tch"><img id="tch" src="images/tch.png" /></li>
.....
</ul>

Answer 1

定义一个变量 var isClick = true;
在点击事件的时候就把 isClick = false;
然后在mouseout的时候判断isClick 是否为TRUE，如果为TRUE，就执行，为false就不执行
总体代码如下：

var isClick = true; // 定义变量
$(document).ready(function(){
isClick = false; // 改变变量值
$(".dh li").click(function(){
var $img_name=$(this).children('img').attr("id");
var $img_on="images/"+$img_name+"_on.png";
var $other=$(".dh img").not("#"+$img_name);
$(this).children("img").attr("src",$img_on);
$other.each(function(){
$(this).attr("src","images/"+$(this).attr("id")+".png");
});
});

$(".dh li").mouseover(function(){
var $img_name=$(this).children('img').attr("id");
var $img_on="images/"+$img_name+"_on.png";
$(this).children("img").attr("src",$img_on);
});
$(".dh li").mouseout(function(){
if(isClick) { // 当isClick为TRUE的时候，就执行，否则不执行
var $img_name=$(this).children('img').attr("id");
var $img_out="images/"+$img_name+".png";
$(this).children("img").attr("src",$img_out);
}
});
});
HTML：
<ul class="dh">
<li id="home"><img id="home" src="images/home.png" /></li>
<li id="club"><img id="club" src="images/club.png" /></li>
<li id="tch"><img id="tch" src="images/tch.png" /></li>
.....
</ul>