jquery 阻止click，mouseover，mouseout冒泡问题
<ul>
<li class="red"><a href="javascript:void(0)">项目一</a></li>
<li class="green"><a href="javascript:void(0)">项目二</a></li>
<li class="green"><a href="javascript:void(0)">项目三</a></li>
<li class="green"><a href="javascript:void(0)">项目四</a></li>
</ul>
$(function () {
$.each($("li"), function (i, o) {
$(this).children("a").click(function () {
allhide();
$(this).parent("li").attr("class", "red");
});
if ($(this).attr("class") != "red") {
$(this).mouseenter(function () {
$(this).attr("class", "red");
});
$(this).mouseleave(function () {
$(this).attr("class", "green");
});
}
});
});
function allhide() {
$.each($("li"), function (i, o) {
$(this).attr("class", "green");
});
}
<style type="text/css">
li
{
width: 80px;
list-style-type: none;
}
.red
{
background-color: Red;
}
.green
{
background-color: Green;
}
</style> 冒泡?click?mouseout?
[解决办法]
$.each($("li"), function (i, o) {
$(this).children("a").click(function (e) {
$("li").attr("class", "green");//不用另起函数
$(this).parent("li").attr("class", "red");
e.stopPropagation();
});
if ($(this).attr("class") != "red") {
$(this).mouseenter(function (e) {
$(this).attr("class", "red");
e.stopPropagation();
});
$(this).mouseleave(function (e) {
$(this).attr("class", "green");
e.stopPropagation();
});
}
});
[解决办法]
console.log是控制台输出，调试很好用，没用过可以用alert也行；
鼠标的点击是在鼠标移入之后，也就是你没有捕捉到鼠标移入。你现在的逻辑是页面加载完成后没有'red'类的元素绑定了hover事件，也就是你给除了第一个元素外的元素绑定了事件。
其实一般都是把逻辑处理放到事件里的，而你的if ($(this).attr("class") != "red") {//event handle}这种方式不可取
