5

私はこのリストを埋めています：

<ul id="FolderList"></ul>

次の HTML を生成する jquery を使用したフォルダーのリスト:

<ul id="FolderList">
    <li id="FolderList0" onclick="return myFunc(0)">Item 1</li>
    <li id="FolderList1" onclick="return myFunc(1)">Item 2</li>
    <li id="FolderList2" onclick="return myFunc(2)">Item 3
        <ul>
            <li id="FolderList2a" onclick="return myFunc(2a)">Sub Item 1</li>
            <li id="FolderList2b" onclick="return myFunc(2b)">Sub Item 2
                <ul>
                    <li id="FolderList2bi" onclick="return myFunc(2bi)">Subsub Item 1</li>
                </ul>
            </li>
        </ul>          
    </li>
</ul>

...

function myFunc(id) {
//do something

false を返します。};

何らかの理由で、レベル 1 の li アイテムをクリックすると、関数 myFunc() が期待どおりに実行されます。「レベル 2」の項目 (FolderList2a など) をクリックすると、myFunc が 2 回呼び出されます。3 番目のレベル (つまり、FolderList2bi) をクリックすると、3 回呼び出されます。ここで何が起こっているか知っている人はいますか?! 前もって感謝します！

4

5 に答える 5

10

クリック イベントがDomを泡立ててい
ます。泡立ちを防ぎたい場合は、 myFuncfalse を返します

event.stopPropagationバブリングを停止するには、イベント オブジェクトにアクセスするかevent.cancelBubble、ブラウザーによってはアクセスする必要があります。

http://jsfiddle.net/Jetyc/3/

于 2012-07-04T19:58:56.253 に答える
1

文字列を引数として渡す必要があるため、引用符で囲みます。

                                             .--.-----------------
                                             v  v
<li id="FolderList2a" onclick="return myFunc('2a')">Sub Item 1</li>

またreturn false、関数の最後に配置します。

function myFunc(id) {
    //do something

    return false;
};
于 2012-07-04T19:56:42.047 に答える
0

基本的にあなたが遭遇しているのはイベントバブリングと呼ばれています。

ネストされた要素のセットをクリックすると、クリックは最初に階層内の最も深い要素に送信され、次に階層内で上に移動します。

MDNイベント伝播の例を参照してください

于 2012-07-04T20:02:41.207 に答える
0

代わりに を使用.bind()して、DOM のバブリングを回避する必要があります。

$("#FolderList li").bind("click", function() {
//do stuff
});
于 2012-07-04T19:59:28.010 に答える
0

バブルが発生するため、イベントは複数回発生します。イベント バブリングの詳細については、たとえば、 http ://www.quirksmode.org/js/events_order.html を参照してください。

于 2012-07-04T20:00:18.853 に答える