5

我有以下结构。

<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 文件 2.1.1. 函数调用3次

第一次为 li 文件 2.1.1 ，第二次为 li 子文件夹 2.1 ，第三次为 li 文件夹 2 。

谁能给我一个解决方案来只调用一次函数？

非常感谢您的帮助。谢谢。

4

4 回答 4

14

那是因为 你li在#broswer.

试试这个：

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

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

$("#browser li").click(function(event){
    event.stopPropagation();
    //your code
});
于 2012-06-20T16:21:30.807 回答
5

将您的功能更改为

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

});

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

于 2012-06-20T16:22:32.470 回答
2

这是由于事实事件“冒泡”了你的 dom，所以如果你点击

文件 2.1.1，文件 2.1 和文件 2 也将听到此更改事件以修复

$("#browser li").click(function(e){
  //Your code here
  e.stopPropagation();
});
于 2012-06-20T16:22:49.627 回答
0

与其在 li 对象上使用 click 事件，不如添加另一个元素（在示例 span 中）并在其中处理 click。这种方式仍然可以为更高的事件冒泡，只是不会通过嵌套的 li 冒泡。

//Run the following to see the no li bubble result 

$(".nobubble").on('click',function(){
    $("#result").append($(this).attr("data-id") +"<br />")
   });

//uncomment the following to see the li bubble result
/*$(".bubble").on('click',function(){
    $("#result").append($(this).attr("data-id") +"<br />")
   });*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="bubble" data-id="li-a"><span  class="nobubble" data-id="span-a">a</span>
    <ul>
      <li class="bubble" data-id="li-b"><span class="nobubble" data-id="span-b">b</span>
      </li>
    </ul>
  </li>
</ul>

<div id="result">
</div>

于 2015-10-04T02:18:29.610 回答