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 回呼び出します

1回目はli File 2.1.1、2回目はli Subfolder 2.1、3回目はli Folder 2です。

関数を正確に 1 回呼び出すための解決策を誰かに教えてもらえますか?

あなたの助けは非常に高く評価されています. ありがとう。

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 では、この変更イベントを

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