首页 > ul>li>ul>li这样的二级菜单点击的时候加类也加到父亲的头上去了

ul>li>ul>li这样的二级菜单点击的时候加类也加到父亲的头上去了

下面是html代码

<ul class="dropdown">
    <li>
        <a href=''>A</a>
        <ul>
            <li><a href=''>1a</a></li>
            <li><a href=''>1b</a></Li>
            <li><a href=''>1c</a></li>
        </ul>
    </li>
    <li>
        <a href=''>B</a>
        <ul>
            <li><a href=''>2a</a></li>
            <li><a href=''>2b</a></Li>
            <li><a href=''>2c</a></li>
        </ul>
    </li>
    <li>
        <a href=''>C</a>
        <ul>
            <li><a href=''>3a</a></li>
            <li><a href=''>3b</a></Li>
            <li><a href=''>3c</a></li>
        </ul>
    </li>
</ul>

下面是js代码

    $(document).on('click','ul.dropdown>li',function(){
        var m = $(this).find('a').attr('href');
        m = swithParamUseLimit(m);
       console.log(m);
        $(m).addClass('noob-sos-ao');
        m = null;
    });
    $(document).on('click','ul.dropdown>li>ul>li',function(){
        var m = $(this).find('a').attr('href');
        m = swithParamUseLimit(m);
        console.log(m);
        $(m).addClass('noob-sos-ao');
    });

但是当下面的js事件触发时,上面的事件也被触发了,何解,这样的怎么处理?


这个叫着事件冒泡(触发子元素事件的同时也会触发父元素的事件)
具体参考: http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture
因此可以在下面的函数里添加一句 arguments[0].stopPropagation()


在这个 $(document).on('click','ul.dropdown>li>ul>li',function(){ 事件里面加个 return false;


阻止事件冒泡方法
functon stopPropagation(event){

if(event.stoPropagation){
    event.stoPropagation();
}else{
    event.canceBubble = false;
}

}


这个是因为事件冒泡了,相当于两个事件都命中触发了,你可以参考一下上面的阻止事件冒泡的方法。

【热门文章】
【热门文章】