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