jquery 阻止click，mouseover，mouseout冒泡问题

[ac382717036]

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

[ac382717036]

有哪位大侠知道吗？？

[clark_kidd]

你的问题是什么？冒泡是啥？还潜水呢

[ac382717036]

呵呵，冒泡就是哪一个先触发事件

[scscms太阳光]

$.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(); }); } });

[ac382717036]

好像不起作用，还是鼠标点击时改变这个li的样式，但是鼠标移开时就去掉了这个样式了，不知道是什么原因

[ac382717036]

[ac382717036]

求助，上面的图片是我出现的问题，我想把第三张图片也变成第二张图片一样的

[scscms太阳光]

<script type="text/javascript">
    //这里不存在冒泡呀
    $(function () {
        $("li").each(function(){
            $(this).find("a").click(function(){
                $("li").attr("class","green");
                $(this).parent().attr("class","red");
            })
        });
    });
</script>

[ac382717036]

哦，不是冒泡吗？？那我这里的点击后移开鼠标样式就改变了啊

[bjb05]

$(this).children("a").click(function () { allhide(); $(this).parent("li").attr("class", "red"); }); 感觉是代码的问题，你的$(this)指针变过了下面还能用吗？ 你用变量记录一下var that = $(this)试试 if ($(this).attr("class") != "red") { $(this).mouseenter(function () { $(this).attr("class", "red"); }); $(this).mouseleave(function () { $(this).attr("class", "green"); }); } });

[bjb05]

引用 10 楼 bjb05 的回复:

$(this).children("a").click(function () { allhide(); $(this).parent("li").attr("class", "red"); }); 感觉是代码的问题，你的$(this)指针变过了下面还能……

哦我搞错了，我对作用域理解有问题，不过我知道你问题在哪了，你点击后没有鼠标移入，你在mouseenter和mouseleave里放console.log()就知道了，逻辑错误

[ac382717036]

放入console.log()没输出，到底是哪里的逻辑错误啊，我想不明白，不是$(this)的问题吧

[bjb05]

console.log是控制台输出，调试很好用，没用过可以用alert也行； 鼠标的点击是在鼠标移入之后，也就是你没有捕捉到鼠标移入。你现在的逻辑是页面加载完成后没有'red'类的元素绑定了hover事件，也就是你给除了第一个元素外的元素绑定了事件。 其实一般都是把逻辑处理放到事件里的，而你的if ($(this).attr("class") != "red") {//event handle}这种方式不可取

[ac382717036]

恩，我自己也搞明白了，鼠标点击事件时，颜色为红色的样式已经变化了，而我没有把变化的指针保存下来，以下是我修改后的代码： nodeli = $("ul li:first"); $.each($("li"), function (i, o) { $(this).click(function () { allhide(); $(this).attr("class", "red"); nodeli = $(this); //alert(nodeli.html()); }); $(this).mouseover(function () { $(this).attr("class", "red"); }); $(this).mouseout(function () { $(this).attr("class", "green"); $(nodeli).attr("class", "red"); // alert(nodeli.html()); }); });