日期:2014-05-16  浏览次数:20338 次

关于对象事件叠加
JScript code
<ul id="nav_left" class="nav_left">
                <li  onclick="showDiv(this,2,'up')"><a href="#">一级标题</a>
                    <ul>
                        <li onclick="showDiv(this,2,'up')"><a href="#">二级标题</a>
                            <ul>
                                <li><a href="#">三级标题</a>
                                    <ul>
                                        <li><a href="#">...</a>
                                            <ul>
                                                <li><a href="#">N级标题</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
<ul>


请问如何在点击 二级标题 的li时不触发 一级标题li 的click事件?

------解决方案--------------------
没做个阻止事件冒泡,搜了一下,这样试试
在二级列表处加一句,这样:
<li onclick="showDiv(this,2,'up');window.event.cancelBubble = true;">

------解决方案--------------------
需要将event对象传递到showDiv中
HTML code

<li onclick="showDiv(event,this,2,'up');">

------解决方案--------------------
探讨

没做个阻止事件冒泡,搜了一下,这样试试
在二级列表处加一句,这样:
<li onclick="showDiv(this,2,'up');window.event.cancelBubble = true;">

------解决方案--------------------
HTML code
<style>
    ul{ display:none;border: 1px solid red;margin-left:10px}
</style>
<ul id="nav_left" class="nav_left" style="display: block">
    <li><a href="#">一级标题</a>
        <ul>
            <li><a href="#">二级标题</a>
                <ul>
                    <li><a href="#">三级标题</a>
                        <ul>
                            <li><a href="#">四级</a>
                                <ul>
                                    <li><a href="#">N级标题</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <ul>
<script type="text/javascript">
    $(document).ready(function(){
        /*
        $("li").click(function (e) {
            $(this).children("ul").slideDown(300);
            e.stopPropagation();//阻止冒泡
        });
        $("li").mouseleave(function(e){
            $(this).children("ul").slideUp(300);
        });
        */
        $("li").hover(function(){
            $(this).children("ul").slideDown(300);
        },function(){
            $(this).children("ul").slideUp(300);
        })
    })
</script>