嵌套元素激发父事件

Question

我有一个jsp，它生成以下html结构：

<ul class="folders" id="yui_patched_v3_11_0_1_1410259364795_727">
    <li class="folder" style="cursor: pointer;" id="yui_patched_v3_11_0_1_1410259364795_726">
        <i class="fa fa-plus"></i> <i class="fa fa-folder"></i> Prueba 1 
        <ul class="files" style="display: block;">
            <li class="file"> <a href="/documents/10184/10675/welcome_tools" target="_blank" class="link"> <i class="fa fa-file"></i> welcome_tools </a> </li>
            <li class="file"> <a href="/documents/10184/10675/welcome_learn" target="_blank" class="link"> <i class="fa fa-file"></i> welcome_learn </a> </li>
            <li class="file"> <a href="/documents/10184/10675/welcome_cube" target="_blank" class="link"> <i class="fa fa-file"></i> welcome_cube </a> </li>
            <li class="file"> <a href="/documents/10184/10675/welcome_community" target="_blank" class="link"> <i class="fa fa-file"></i> welcome_community </a> </li>
        </ul>
        <ul class="folders" id="yui_patched_v3_11_0_1_1410259364795_725" style="display: block;">
            <li class="folder" style="cursor: pointer;" id="yui_patched_v3_11_0_1_1410259364795_724">
                <i class="fa fa-folder-open-o"></i> Sub 1 
                <ul class="files" style="display: block;">
                    <li class="file"> <a href="/documents/10184/10707/helpful_links_for_using_liferay_portal" target="_blank" class="link"> <i class="fa fa-file"></i> helpful_links_for_using_liferay_portal </a> </li>
                </ul>
                <ul class="folders" style="display: block;" id="yui_patched_v3_11_0_1_1410259364795_798">
                    <li class="folder" style="cursor: pointer;" id="yui_patched_v3_11_0_1_1410259364795_797">
                        <i class="fa fa-folder-open-o"></i> Sub Sub 1 
                        <ul class="folders" style="display: block;"> </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

我有下面的javascript

$("li.folder")
    .css("cursor", "pointer")
    .on("click", function(){
        $this = $(this);
        $this.find("ul.files,ul.folders").toggle(200);
        return false;
});

对于树状功能。

问题是每当我单击a时，它就会触发li.folder事件。我如何才能使链接表现为链接。

代码笔链接：http://codepen.io/anon/pen/Hokgt

Answer 1

您可以直接排除锚点

$("li.folder")
    .css("cursor", "pointer")
    .on("click", function(e){
        if ( ! $(e.target).is('a') ) {
            $(this).find("ul.files,ul.folders").toggle(200);
        }
        return false;
});

或者走另一条路，并停止传播

$("li.folder a").on('click', function(e) {
    e.stopPropagation();
});