为什么这个函数多次触发？

Question

我填写这个清单:

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

使用jquery生成以下HTML的文件夹列表:

<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两次.如果我点击第3级(即:FolderList2bi),它会被调用3次 - 依此类推.谁知道这里发生了什么？!提前致谢!

Answer 1

点击事件正在向Dom 冒泡
如果你想阻止冒泡让我们myFunc返回false

要停止冒泡,您需要访问事件对象,event.stopPropagation或者event.cancelBubble取决于浏览器.

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