jquery嵌套li多次单击事件调用

Question

我有以下结构.

<ul id="browser" class="filetree">

        <li><span class="folder">Folder 1</span>

            <ul>

                <li><span class="file">Item 1.1</span></li>

            </ul>

        </li>

        <li><span class="folder">Folder 2</span>

            <ul>

                <li><span class="folder">Subfolder 2.1</span>

                    <ul id="folder21">

                        <li><span class="file">File 2.1.1</span></li>

                        <li><span class="file">File 2.1.2</span></li>

                    </ul>

                </li>

                <li><span class="file">File 2.2</span></li>

            </ul>

        </li>

        <li class="closed"><span class="folder">Folder 3 (closed at start)</span>

            <ul>

                <li><span class="file">File 3.1</span></li>

            </ul>

        </li>

        <li><span class="file">File 4</span></li>

    </ul>

在js我有以下功能.

$("#browser li").click(function(){


});

当我点击li File 2.1.1时.该函数调用3次

第一次为li文件2.1.1,第二次为li子文件夹2.1,第三次为li文件夹2.

任何人都可以给我解决方案调用该函数一次吗？

您的帮助非常贴心.谢谢.

Answer 1

那是因为你有很多 li元素#broswer.

试试这个:

$("#browser>li").click(function(){
    //only direct children of #browser
    //your code
});

或者您可以使用event.stopPropagation():

$("#browser li").click(function(event){
    event.stopPropagation();
    //your code
});

Answer 2

将功能更改为

$("#browser li").click(function(event){
   event.stopPropagation();
   //do your other stuff

});

这样，对较低级别的点击li不会“冒泡”至较高级别li。