javascript - mouseout和click冲突怎么解决？？
本文介绍了javascript - mouseout和click冲突怎么解决？？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.mini.js"></script>
</head>
<body>
<span>1111</span>
<script type="text/javascript">
$("span").on({
mouseover:function(){
$(this).text("2222");
},
mouseout:function(){
$(this).text("1111");
},
click:function(){
$(this).text("3333");
}
})
</script>
</body>
</html>这里的click就起不了作用了，因为会被mouseout覆盖，怎么解决？
需求是这样的，一个图标移入时是红色，移出来变为灰色，只有当点击后红色才会保留到图标上面，类似于淘宝上面的星级评分。。
谢谢各位解答，大家都建议我用css做，但这里我只是举了个例子，实际是css做不了的，得用js来，因为图标远不止一个，我还要通过当前图标移入时来判断其他图标的颜色显示。。
。。。再解释一下，我为什么非要用mouseout来做不用class也不用hover css 那是因为还有一个绑定的功能。。。
<body>
<span>1星</span>
<span>2星</span>
<span>3星</span>
<span>4星</span>
<span>5星</span>
<p>你选择的是：</p>
<script type="text/javascript">
$("span").on({
mouseover:function(){
$("p").text("您已评分星级为："+$(this).text());
},
mouseout:function(){
$("p").text("您暂未评分");
},
click:function(){
$("p").text("您已评分星级为："+$(this).text());
}
})
</script>
</body>要文字显示当前用户选择的星星数。。如果没有用户未点击图标，mouseout后就不显示星星数了。。
谢谢，各位问题已解决，感谢
<script type="text/javascript">
var isclick=false;
var clickResult;
$("span").on({
mouseover:function(){
$("p").text("您已评分星级为："+$(this).text());
},
mouseout:function(){
if(!isclick){
$("p").text("您暂未评分");
}else{
$("p").text("您已评分星级为："+clickResult);
}
},
click:function(){
clickResult=$(this).text()
$("p").text("您已评分星级为："+clickResult);
isclick=true;
}
})
</script>解决方案
没有太明白题主的意思，是如果click后mouseout就不执行？
如果是这样的话，那在mouseout的时候做下判断就好了，判断现在text是否是3333，或者通过全局变量来做个控制开关，click之后为false，mouseout执行前先判断。
但按照写的js来看，click之后肯定是会触发其他事件的，那么什么时候才允许触发呢？这个才是逻辑的关键了。
按照题主说的，我这边大概写了下：
var isclick=false;
$("span").on({
mouseover:function(){
$("p").text("您已评分星级为："+$(this).text());
},
mouseout:function(){
if(!isclick){
$("p").text("您暂未评分");
}
},
click:function(){
$("p").text("您已评分星级为："+$(this).text());
isclick=true;
}
})
简单方法加个变量判断用户是否已点击，点击则不执行mouseout事件.
这篇关于javascript - mouseout和click冲突怎么解决？？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
