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

Question

下面是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事件触发时，上面的事件也被触发了，何解，这样的怎么处理？

Answer 1

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

Answer 2

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

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

}

Answer 3

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