jquery는 클릭, 마우스 오버 및 마우스 아웃 버블링 문제를 해결하는 것을 방지합니다.

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

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

작동하지 않는 것 같습니다. 마우스를 클릭하면 li 스타일이 변경되지만, 마우스를 멀리 이동하면 스타일이 제거됩니다. 왜인지는 모르겠습니다.

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

아, 그렇지 않습니다. 버블링? ? 그런 다음 여기에서 마우스를 클릭하면 스타일이 변경됩니다.

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

글쎄, 제가 직접 알아냈습니다. event를 마우스로 클릭하면 빨간색 스타일이 바뀌었지만 포인터는 바뀌지 않았습니다. . 저장하세요. 수정된 코드는 다음과 같습니다.

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

위 내용은 jquery는 클릭, 마우스 오버 및 마우스 아웃 버블링 문제를 해결하는 것을 방지합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!